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Introduction 


HTML5 no es una nueva version del antiguo lenguaje de etiquetas, ni siquiera una mejora 
de esta ya antigua tecnologfa, sino un nuevo concepto para la construccion de sitios web y 
aplicaciones en una era que combina dispositivos mbviles, computacibn en la nube y 
trabajos en red. 

Todo comenzo mucho tiempo atras con una simple version de HTML propuesta para 
crear la estructura basica de paginas web, organizar su contenido y compartir informacion. 
El lenguaje y la web misma nacieron principalmente con la intencion de comunicar 
informacion por medio de texto. 

El limitado objetivo de HTML motivo a varias companfas a desarrollar nuevos lenguajes 
y programas para agregar caracterfsticas a la web nunca antes implementadas. Estos 
desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios. 
Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, 
ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre. 

De las opciones propuestas, Java y Flash fueron las mas exitosas; ambas fueron 
masivamente adoptadas y ampliamente consideradas como el futuro de Internet. Sin 
embargo, tan pronto como el numero de usuarios se incremento e Internet paso de ser 
una forma de conectar amantes de los ordenadores a un campo estrategico para los 
negocios y la interaccion social, limitaciones presentes en estas dos tecnologfas probaron 
ser una sentencia de muerte. 

El mayor inconveniente de Java y Flash puede describirse como una falta de 
integracion. Ambos fueron concebidos desde el principio como complementos (plug-ins), 
algo que se inserta dentro de una estructura pero que comparte con la misma solo 
espacio en la pantalla. No existia comunicacion e integracion alguna entre aplicaciones y 
documentos. 

La falta de integracion resulto ser crftica y preparo el camino para la evolucion de un 
lenguaje que comparte espacio en el documento con HTML y no esta afectado por las 
limitaciones de los plug-ins. Javascript, un lenguaje interpretado incluido en navegadores, 
claramente era la manera de mejorar la experiencia de los usuarios y proveer 
funcionalidad para la web. Sin embargo, despues de algunos anos de intentos fallidos para 
promoverlo y algunos malos usos, el mercado nunca lo adopto plenamente y pronto su 
popularidad declino. Los detractores tenian buenas razones para oponerse a su adopcion. 
En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. A 
pesar de ser evidente que ambos limitaban el alcance de las aplicaciones y aislaban el 
contenido web, populares funciones como la reproduccion de video se estaban 
convirtiendo en una parte esencial de la web y solo eran efectivamente ofrecidas a traves 
de estas tecnologfas. 



A pesar del suceso inicial, el uso de Java comenzo a declinar. La naturaleza compleja 
del lenguaje, su evolucion lenta y la falta de integration disminuyeron su importancia 
hasta el punto en el que hoy dfa no es mas usado en aplicaciones web de importancia. Sin 
Java, el mercado volco su atencion a Flash. Pero el hecho de que Flash comparte las 
mismas caracteristicas basicas que su competidor en la web lo hace tambien susceptible 
de correr el mismo destino. 

Mientras esta competencia silenciosa se llevaba a cabo, el software para acceder a la 
web continuaba evolucionando. Junto con nuevas funciones y tecnicas rapidas de acceso a 
la red, los navegadores tambien mejoraron gradualmente sus interpretes Javascript. Mas 
potencia trajo mas oportunidades y este lenguaje estaba listo para aprovecharlas. 

En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores 
que ni Java o Flash podrian proveer las herramientas que ellos necesitaban para crear las 
aplicaciones demandadas por un numero creciente de usuarios. Estos desarrolladores, 
impulsados por las mejoras otorgadas por los navegadores, comenzaron a aplicar 
Javascript en sus aplicaciones de un modo nunca visto. La innovacion y los increibles 
resultados obtenidos llamaron la atencion de mas programadores. Pronto lo que fue 
llamado la "Web 2.0" nacio y la percepcion de Javascript en la comunidad de 
programadores cambio radicalmente. 

Javascript era claramente el lenguaje que permitfa a los desarrolladores innovar y 
hacer cosas que nadie habia podido hacer antes en la web. En los ultimos anos, 
programadores y disenadores web alrededor del mundo surgieron con los mas increibles 
trucos para superar las limitaciones de esta tecnologia y sus iniciales deficiencias en 
portabilidad. Gracias a estas nuevas implementaciones, Javascript, HTML y CSS se 
convirtieron pronto en la mas perfecta combinacion para la necesaria evolucion de la web. 

HTML5 es, de hecho, una mejora de esta combinacion, el pegamento que une todo. 
HTML5 propone estandares para cada aspecto de la web y tambien un proposito claro 
para cada una de las tecnologias involucradas. A partir de ahora, HTML provee los 
elementos estructurales, CSS se encuentra concentrado en como volver esa estructura 
utilizable y atractiva a la vista, y Javascript tiene todo el poder necesario para proveer 
dinamismo y construir aplicaciones web completamente funcionales. 

Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las 
tecnologias requeridas para el proceso de integracion estan listas. El futuro de la web es 
prometedor y la evolucion y combinacion de estas tres tecnologias (HTML, CSS y 
Javascript) en una poderosa especificacion esta volviendo a Internet la plataforma lider de 
desarrollo. HTML5 indica claramente el camino. 

IMPORTANTE: En este momento no todos los navegadores soportan HTML5 y la 
mayoria de sus funciones se encuentran actualmente en estado de desarrollo. 
Recomendamos leer los capitulos y ejecutar los codigos con las ultimas versiones 
de Google Chrome y Firefox. Google Chrome ya implementa muchas de las 
caracteristicas de HTML5 y ademas es una buena plataforma para pruebas. Por 
otro lado, Firefox es uno de los mejores navegadores para desarrolladores y 
tambien provee total soporte para HTML5. 



Sea cual fuere el navegador elegido, siempre tenga en mente que un buen 
desarrollador instala y prueba sus codigos en cada programa disponible en el 
mercado. Ejecute los codigos provistos en este libro en cada uno de los 
navegadores disponibles. 

Para descargar las ultimas versiones, visite los siguientes enlaces: 

• www.google.com/chrome 

• www.apple.com/safari/download 

• www.mozilla.com 

• windows.microsoft.com 

• www.opera.com 

En la conclusion del libro exploramos diferentes alternativas para hacer sus sitios webs y 
aplicaciones accesibles desde viejos navegadores e incluso aquellos que aun no estan 
preparados para HTML5. 





Capitulo 1 

Documentos HTML5 


1.1 Componentes basicos 

HTML5 provee basicamente tres caracterlsticas: estructura, estilo y funcionalidad. Nunca 
fue declarado oficialmente pero, incluso cuando algunas APIs (Interface de Programacion 
de Aplicaciones) y la especificacion de CSS3 por completo no son parte del mismo, HTML5 
es considerado el producto de la combinacion de HTML, CSS y Javascript. Estas tecnologlas 
son altamente dependientes y actuan como una sola unidad organizada bajo la 
especificacion de HTML5. HTML esta a cargo de la estructura, CSS presenta esa estructura 
y su contenido en la pantalla y Javascript hace el resto que (como veremos mas adelante) 
es extremadamente significativo. 

Mas alia de esta integracion, la estructura sigue siendo parte esencial de un 
documento. La misma provee los elementos necesarios para ubicar contenido estatico o 
dinamico, y es tambien una plataforma basica para aplicaciones. Con la variedad de 
dispositivos para acceder a Internet y la diversidad de interfaces disponibles para 
interactuar con la web, un aspecto basico como la estructura se vuelve parte vital del 
documento. Ahora la estructura debe proveer forma, organizacion y flexibilidad, y debe 
ser tan fuerte como los fundamentos de un edificio. 

Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero 
como esa estructura es construida. Crear fundamentos fuertes nos ayudara mas adelante 
a aplicar el resto de los componentes para aprovechar completamente estas nuevas 
tecnologlas. 

Por lo tanto, empecemos por lo basico, paso a paso. En este primer capitulo aprendera 
como construir una plantilla para futuros proyectos usando los nuevos elementos HTML 
introducidos en HTML5. 

Hagalo usted mismo: Cree un archivo de texto vaclo utilizando su editor de 
textos favorito para probar cada codigo presentado en este capitulo. Esto lo 
ayudara a recordar las nuevas etiquetas HTML y acostumbrarse a ellas. 

Conceptos basicos: Un documento HTML es un archivo de texto. Si usted no 
posee ningun programa para desarrollo web, puede simplemente utilizar el Bloc 
de Notas de Windows o cualquier otro editor de textos. El archivo debe ser 
grabado con la extension .html y el nombre que desee (por ejemplo, 
micodigo. html). 
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IMPORTANTE: Para acceder a informacion adicional y a los listados de ejemplo, 
visite nuestro sitio web www.minkbooks.com. 


1.2 Estructura global 

Los documentos HTML se encuentran estrictamente organizados. Cada parte del 
documento esta diferenciada, declarada y determinada por etiquetas espedficas. En esta 
parte del capftulo vamos a ver como construir la estructura global de un documento HTML 
y los nuevos elementos semanticos incorporados en HTML5. 

<!DOCTYPE> 

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en 
HTML5 es extremadamente sencillo: 


<!DOCTYPE html> 


Listado 1-1. Usando el elemento <doctype>. 

IMPORTANTE: Esta linea debe ser la primera linea del archivo, sin espacios o 
lineas que la precedan. De esta forma, el modo estandar del navegador es 
activado y las incorporaciones de HTML5 son interpretadas siempre que sea 
posible, o ignoradas en caso contrario. 

Hagalo usted mismo: Puede comenzar a copiar el codigo en su archivo de texto y 
agregar los proximos a medida que los vamos estudiando. 


<html> 

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura 
HTML. Como siempre, la estructura tipo arbol de este lenguaje tiene su raiz en el 
elemento <htmi>. Este elemento envolvera al resto del codigo: 


<!DOCTYPE html> 

<html lang="es"> 

</html> 


Listado 1-2. Usando el elemento <html>. 
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El atributo lang en la etiqueta de apertura <htmi> es el unico atributo que 
necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido 
del documento que estamos creando, en este caso es por espanol. 

Conceptos basicos: HTML usa un lenguaje de etiquetas para construir paginas 
web. Estas etiquetas HTML son palabras clave y atributos rodeados de los signos 
mayor y menor (por ejemplo, <html lang="es">). En este caso, html es la 
palabra clave y lang es el atributo con el valor es. La mayona de las etiquetas 
HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el 
contenido se declara entre ellas. En nuestro ejemplo, chtml lang="es"> indica 
el comienzo del codigo HTML y </html> indica el final. Compare las etiquetas de 
apertura y cierre y vera que la de cierre se distingue por una barra invertida antes 
de la palabra clave (por ejemplo, </htmi>). El resto de nuestro codigo sera 
insertado entre estas dos etiquetas: <htmi> ... </htmi>. 

IMPORTANTE: HTML5 es extremadamente flexible en cuanto a la estructura y a 
los elementos utilizados para construirla. El elemento <htmi> puede ser incluido 
sin ningun atributo o incluso ignorado completamente. Con el proposito de 
preservar compatibilidad (y por algunas razones extras que no vale la pena 
mencionar aquf) le recomendamos que siga algunas reglas basicas. En este libro 
vamos a ensenarle como construir documentos HTML de acuerdo a lo que 
nosotros consideramos practicas recomendadas. 

Para encontrar otros lenguajes para el atributo lang puede visitar el siguiente enlace: 
www.w3schools.com/tags/ref_language_codes.asp. 

<head> 

Continuemos construyendo nuestra plantilla. El codigo HTML insertado entre las etiquetas 
chtml > tiene que ser dividido entre dos secciones principales. Al igual que en versiones 
previas de HTML, la primera seccion es la cabecera y la segunda el cuerpo. El siguiente 
paso, por lo tanto, sera crear estas dos secciones en el codigo usando los elementos 
chead> y <body> ya conocidos. 

El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos 
estructurales tiene una etiqueta de apertura y una de cierre: 


<!DOCTYPE html> 
chtml lang="es"> 

c/head> 

c/html> 


Listado 1-3. Usando el elemento <head>. 
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La etiqueta no cambio desde versiones anteriores y su proposito sigue siendo 
exactamente el mismo. Dentro de las etiquetas <head> definiremos el titulo de nuestra 
pagina web, declararemos el set de caracteres correspondiente, proveeremos informacion 
general acerca del documento e incorporaremos los archivos externos con estilos, codigos 
Javascript o incluso imagenes necesarias para generar la pagina en la pantalla. 

Excepto por el titulo y algunos iconos, el resto de la informacion incorporada en el 
documento entre estas etiquetas es invisible para el usuario. 

<body> 

La siguiente gran seccion que es parte principal de la organizacion de un documento HTML 
es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado 
entre etiquetas <body>. Estas etiquetas tampoco han cambiado en relacion con versiones 
previas de HTML: 


<!DOCTYPE html> 
chtml lang="es"> 
<head> 

</head> 

<body> 

</html> 


Listado 1-4. Usando el elemento <body>. 

Conceptos basicos: Hasta el momento tenemos un codigo simple pero con una 
estructura compleja. Esto es porque el codigo HTML no esta formado por un 
conjunto de instrucciones secuenciales. HTML es un lenguaje de etiquetas, un 
listado de elementos que usualmente se utilizan en pares y que pueden ser 
anidados (totalmente contenidos uno dentro del otro). En la primera linea del 
codigo del Listado 1-4 tenemos una etiqueta simple con la definicion del tipo de 
documento e inmediatamente despues la etiqueta de apertura <htmi 
lang="es">. Esta etiqueta y la de cierre </html> al final del listado estan 
indicando el comienzo del codigo HTML y su final. Entre las etiquetas <html> 
insertamos otras etiquetas especificando dos importantes partes de la estructura 
basica: <head> para la cabecera y <body> para el cuerpo del documento. Estas 
dos etiquetas tambien se utilizan en pares. Mas adelante en este capitulo 
veremos que mas etiquetas son insertadas entre estas ultimas conformando una 
estructura de arbol con <html> como su raiz. 
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<meta> 

Es momento de construir la cabecera del documento. Algunos cambios e innovaciones 
fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el 
juego de caracteres a utilizar para mostrar el documento. Esta es una etiqueta <meta> 
que especifica como el texto sera presentado en pantalla: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

cmeta charset="iso-8859-l"> 

</head> 

<body> 

</body> 

</html> 


Listado 1-5. Usando el elemento <meta>. 

La innovacion de este elemento en HTML5, como en la mayoria de los casos, es solo 
simplificacion. La nueva etiqueta <meta> para la definicion del tipo de caracteres es mas 
corta y simple. Por supuesto, podemos cambiar el tipo iso-8859-i por el necesario para 
nuestros documentos y agregar otras etiquetas <meta> como description o keywords 
para definir otros aspectos de la pagina web, como es mostrado en el siguiente ejemplo: 


<!DOCTYPE html> 
chtml lang="es"> 

cmeta charset="iso-8859-l"> 

cmeta name="description" content="Ejemplo de HTML5"> 
cmeta name="keywords" content="HTML5, CSS3, Javascript"? 

c/head> 

cbody> 

c/body> 

c/html> 


Listado 1-6. Agregando mas elementos <meta>. 

Conceptos basicos: Hay varios tipos de etiqueta cmeta? que pueden ser incluidas 
para declarar informacion general sobre el documento, pero esta informacion no 
es mostrada en la ventana del navegador, es solo importante para motores de 
busqueda y dispositivos que necesitan hacer una vista previa del documento u 
obtener un sumario de la informacion que contiene. Como comentamos 
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anteriormente, aparte del titulo y algunos iconos, la mayoria de la informacion 
insertada entre las etiquetas chead> no es visible para los usuarios. En el codigo 
del Listado 1-6, el atributo name dentro de la etiqueta <meta> especifica su tipo y 
content declara su valor, pero ninguno de estos valores es mostrado en 
pantalla. Para aprender mas sobre la etiqueta <meta>, visite nuestro sitio web y 
siga los enlaces proporcionados para este capitulo. 

En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero 
recomendamos utilizarlas por razones de compatibilidad. El anterior codigo se podria 
escribir de la siguiente manera: 


<!DOCTYPE html> 
chtml lang="es"> 

cmeta charset="iso-8859-l" /> 

cmeta name="description" content="Ejemplo de HTML5" /> 
cmeta name="keywords" contents"HTML5, CSS3, JavaScript" /> 

</head> 

<body> 

</body> 

</html> 


Listado 1-7. Cierre de etiquetas simples. 


<title> 

La etiqueta <title>, como siempre, simplemente especifica el titulo del documento, y no 
hay nada nuevo para comentar: 


<!DOCTYPE html> 
chtml lang="es"> 
chead> 

cmeta charset="iso-8859-l"> 

cmeta name="description" contents"Ejemplo de HTML5"> 
cmeta name="keywords" contents"HTML5, CSS3, JavaScript"> 

ctitle>Este texto es el titulo del documentoc/title> 

c/head> 

cbody> 

c/body> 

c/html> 


Listado 1-8. Usando la etiqueta <title>. 




Documentos HTML5 


Conceptos basicos: El texto entre las etiquetas <title> es el tftulo del documento 
que estamos creando. Normalmente este texto es mostrado en la barra superior de 
la ventana del navegador. 


<link> 

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este 
elemento es usado para incorporar estilos, codigos Javascript, imagenes o iconos desde 
archivos externos. Uno de los usos mas comunes para <iink> es la incorporacion de 
archivos con estilos CSS: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 

<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

</body> 

</html> 


Listado 1-9. Usando el elemento <link>. 

En HTML5 ya no se necesita especificar que tipo de estilos estamos insertando, por lo 
que el atributo type fue eliminado. Solo necesitamos dos atributos para incorporar 
nuestro archivo de estilos: rel y href. El atributo rel significa "relacion" y es acerca de 
la relacion entre el documento y el archivo que estamos incorporando por medio de href. 
En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el 
archivo misestilos.css es un archivo CSS con estilos requeridos para presentar la 
pagina en pantalla (en el proximo capitulo estudiaremos como utilizar estilos CSS). 

Conceptos basicos: Un archivo de estilos es un grupo de reglas de formato que 
ayudaran a cambiar la apariencia de nuestra pagina web (por ejemplo, el tamano 
y color del texto). Sin estas reglas, el texto y cualquier otro elemento HTML seria 
mostrado en pantalla utilizando los estilos estandar provistos por el navegador. 
Los estilos son reglas simples que normalmente requieren solo unas pocas lineas 
de codigo y pueden ser declarados en el mismo documento. Como veremos mas 
adelante, no es estrictamente necesario obtener esta informacion de archivos 
externos pero es una practica recomendada. Cargar las reglas CSS desde un 
documento externo (otro archivo) nos permitira organizar el documento 
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principal, incrementar la velocidad de carga y aprovechar las nuevas 
caracterfsticas de HTML5. 

Con esta ultima insercion podemos considerar finalizado nuestro trabajo en la 
cabecera. Ahora es tiempo de trabajar en el cuerpo, donde la magia ocurre. 


1.3 Estructura del cuerpo 

La estructura del cuerpo (el codigo entre las etiquetas <body>) generara la parte visible 
del documento. Este es el codigo que producira nuestra pagina web. 

HTML siempre ofrecio diferentes formas de construir y organizar la informacion dentro 
del cuerpo de un documento. Uno de los primeros elementos provistos para este 
proposito fue <table>. Las tablas permitfan a los disenadores acomodar datos, texto, 
imagenes y herramientas dentro de filas y columnas de celdas, incluso sin que hayan sido 
concebidas para este proposito. 

En los primeros dfas de la web, las tablas fueron una revolucion, un gran paso hacia 
adelante con respecto a la visualizacion de los documentos y la experiencia ofrecida a los 
usuarios. Mas adelante, gradualmente, otros elementos reemplazaron su funcion, 
permitiendo lograr lo mismo con menos codigo, facilitando de este modo la creacion, 
permitiendo portabilidad y ayudando al mantenimiento de los sitios web. 

El elemento <div> comenzo a dominar la escena. Con el surgimiento de webs mas 
interactivas y la integracion de HTML, CSS y Javascript, el uso de <div> se volvio una 
practica comun. Pero este elemento, asi como <table>, no provee demasiada 
informacion acerca de las parte del cuerpo que esta representando. Desde imagenes a 
menus, textos, enlaces, codigos, formularios, cualquier cosa puede ir entre las etiquetas 
de apertura y cierre de un elemento <div>. En otras palabras, la palabra clave div solo 
especifica una division en el cuerpo, como la celda de una tabla, pero no ofrece indicio 
alguno sobre que clase de division es, cual es su proposito o que contiene. 

Para los usuarios estas claves o indicios no son importantes, pero para los navegadores 
la correcta interpretacion de que hay dentro del documento que se esta procesando 
puede ser crucial en muchos casos. Luego de la revolucion de los dispositivos moviles y el 
surgimiento de diferentes formas en que la gente accede a la web, la identificacion de 
cada parte del documento es una tarea que se ha vuelto mas relevante que nunca. 

Considerando todo lo expuesto, HTML5 incorpora nuevos elementos que ayudan a 
identificar cada seccion del documento y organizar el cuerpo del mismo. En HTML5 las 
secciones mas importantes son diferenciadas y la estructura principal ya no depende mas 
de los elementos <div> o <table>. 

Como usamos estos nuevos elementos depende de nosotros, pero las palabras clave 
otorgadas a cada uno de ellos nos dan ayudan a entender sus funciones. Normalmente 
una pagina o aplicacion web esta dividida entre varias areas visuales para mejorar la 
experiencia del usuario y facilitar la interactividad. Las palabras claves que representan 
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cada nuevo elemento de HTML5 estan mtimamente relacionadas con estas areas, como 
veremos pronto. 

Organization 

La Figura 1-1 representa un diseno comun encontrado en la mayorfa de los sitios webs 
estos dfas. A pesar del hecho de que cada disenador crea sus propios disenos, en general 
podremos identificar las siguientes secciones en cada sitio web estudiado: 


Cabecera 

Barra de Navegacion 


Informacion Principal 

Lateral 


Institucional 


Figura 1-1. Representation visual de un clasico diseno web. 

En la parte superior, descripto como Cabecera, se encuentra el espacio donde usualmente 
se ubica el logo, tltulo, subtftulos y una corta descripcion del sitio web o la pagina. 

Inmediatamente debajo, podemos ver la Barra de Navegacion en la cual casi todos los 
desarrolladores ofrecen un menu o lista de enlaces con el proposito de facilitar la 
navegacion a traves del sitio. Los usuarios son guiados desde esta barra hacia las 
diferentes paginas o documentos, normalmente pertenecientes al mismo sitio web. 

El contenido mas relevante de una pagina web se encuentra, en casi todo diseno, 
ubicado en su centro. Esta seccion presenta informacion y enlaces valiosos. La mayorla de 
las veces es dividida en varias filas y columnas. En el ejemplo de la Figura 1-1 se utilizaron 
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solo dos columnas: Informacion Principal y Barra Lateral, pero esta seccion es 
extremadamente flexible y normalmente disenadores la adaptan acorde a sus necesidades 
insertando mas columnas, dividiendo cada columna entre bloques mas pequenos o 
generando diferentes distribuciones y combinaciones. El contenido presentado en esta 
parte del diseno es usualmente de alta prioridad. En el diseno de ejemplo, Informacion 
Principal podria contener una lista de articulos, descripcion de productos, entradas de un 
blog o cualquier otra informacion importante, y la Barra Lateral podria mostrar una lista 
de enlaces apuntando hacia cada uno se esos items. En un blog, por ejemplo, esta ultima 
columna ofrecera una lista de enlaces apuntando a cada entrada del blog, informacion 
acerca del autor, etc... 

En la base de un diseno web clasico siempre nos encontramos con una barra mas que 
aqui llamamos Institucional. La nombramos de esta manera porque esta es el area en donde 
normalmente se muestra informacion acerca del sitio web, el autor o la empresa, ademas de 
algunos enlaces con respecto a reglas, terminos y condiciones y toda informacion adicional 
que el desarrollador considere importante compartir. La barra Institucional es un 
complemento de la Cabecera y es parte de lo que se considera estos dias la estructura 
esencial de una pagina web, como podemos apreciar en el siguiente ejemplo: 



Figura 1-2. Representation visual de un clasico diseno para blogs. 
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La Figura 1-2 es una representacion de un blog normal. En este ejemplo se puede 
claramente identificar cada parte del diseno considerado anteriormente. 

1. Cabecera 

2. Barra de Navegacion 

3. Seccion de Information Principal 

4. Barra Lateral 

5. El pie o la barra Institucional 

Esta simple representacion de un blog nos puede ayudar a entender que cada seccion 
definida en un sitio web tiene un proposito. A veces este proposito no es claro pero en 
esencia se encuentra siempre alii, ayudandonos a reconocer cualquiera de las secciones 
descriptas anteriormente en todo diseno. 

HTML5 considera esta estructura basica y provee nuevos elementos para diferenciar y 
declarar cada una de sus partes. A partir de ahora podemos decir al navegador para que 
es cada seccion: 


<header> </header> 

<nav> </nav> 

<section> <aside> 


</section> </aside> 

<footer> </footer> 

Figura 1-3. Representacion visual de un diseno utilizando elementos HTML5. 
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La Figura 1-3 muestra el tipico diseno presentado anteriormente, pero esta vez con los 
correspondientes elementos HTML5 para cada seccion (incluyendo etiquetas de apertura y 
cierre). 

<header> 

Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento 
<header> no debe ser confundido con <head> usado antes para construir la cabecera del 
documento. Del mismo modo que <head>, la intencion de <header> es proveer 
informacion introductoria (titulos, subtitulos, logos), pero difiere con respecto a <head> 
en su alcance. Mientras que el elemento <head> tiene el proposito de proveer 
informacion acerca de todo el documento, <header> es usado solo para el cuerpo o 
secciones especificas dentro del cuerpo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 

</html> 


Listado 1-10. Usando el elemento <header>. 

En el Listado 1-10, definimos el titulo de la pagina web utilizando el elemento 
<header>. Recuerde que esta cabecera no es la misma que la utilizada previamente para 
definir el titulo del documento. La insercion del elemento <header> representa el 
comienzo del cuerpo y por lo tanto de la parte visible del documento. De ahora en mas 
sera posible ver los resultados de nuestro codigo en la ventana del navegador. 

Hagalo usted mismo: Si siguio las instrucciones desde el comienzo de este 
capitulo ya deberia contar con un archivo de texto creado con todos los codigos 
estudiados hasta el momento y listo para ser probado. Si no es asi, todo lo que 
debe hacer es copiar el codigo en el Listado 1-10 dentro de un archivo de texto 
vacio utilizando cualquier editor de texto (como el Bloc de Notas de Windows, 
por ejemplo) y grabar el archivo con el nombre de su agrado y la extension 
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. htmi. Para ver el codigo en funcionamiento, abra el archivo en un navegador 
compatible con HTML5 (puede hacerlo con un doble clic sobre el archivo en su 
explorador de archivos). 

Conceptos basicos: Entre las etiquetas <header> en el Listado 1-10 hay un 
elemento que probablemente no conoce. El elemento <hi> es un viejo elemento 
HTML usado para definir titulos. El numero indica la importancia del titulo. El 
elemento <hi> es el mas importante y <h6> el de menor importancia, por lo 
tanto <hi> sera utilizado para mostrar el titulo principal y los demas para 
subtitulos o subtitulos internos. Mas adelante veremos como estos elementos 
trabajan en HTML5. 


<nav> 

Siguiendo con nuestro ejemplo, la siguiente seccion es la Barra de Navegacion. Esta barra 
es generada en HTML5 con el elemento <nav>: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 

<nav> 

<ul > 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

</body> 

</html> 


Listado 1-11. Usando el elemento <nav>. 

Como se puede apreciar en el Listado 1-11, el elemento <nav> se encuentra dentro de 
las etiquetas <body> pero es ubicado despues de la etiqueta de cierre de la cabecera 
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(</header>), no dentro de las etiquetas <header>. Esto es porque <nav> no es parte de 
la cabecera sino una nueva seccion. 

Anteriormente dijimos que la estructura y el orden que elegimos para colocar los 
elementos HTML5 dependen de nosotros. Esto significa que HTML5 es versatil y solo nos 
otorga los parametros y elementos basicos con los que trabajar, pero como usarlos sera 
exclusivamente decision nuestra. Un ejemplo de esta versatilidad es que el elemento 
<nav> podria ser insertado dentro del elemento <header> o en cualquier otra parte del 
cuerpo. Sin embargo, siempre se debe considerar que estas etiquetas fueron creadas para 
brindar informacion a los navegadores y ayudar a cada nuevo programa y dispositivo en el 
mercado a identificar las partes mas relevantes del documento. Para conservar nuestro 
codigo portable y comprensible, recomendamos como buena practica seguir lo que 
marcan los estandares y mantener todo tan claro como sea posible. El elemento <nav> 
fue creado para ofrecer ayuda para la navegacion, como en menus principales o grandes 
bloques de enlaces, y deberfa ser utilizado de esa manera. 

Conceptos basicos: En el ejemplo del Listado 1-11 generamos las opciones del 
menu para nuestra pagina web. Entre las etiquetas <nav> hay dos elementos que 
son utilizados para crear una lista. El proposito del elemento <ul> es definir la 
lista. Anidado entre las etiquetas <ul> encontramos varias etiquetas <li> con 
diferentes textos representando las opciones del menu. Las etiquetas <ii>, 
como probablemente ya se ha dado cuenta, son usadas para definir cada item de 
la lista. El proposito de este libro no es ensenarle conceptos basicos sobre HTML, 
si necesita mas informacion acerca de elementos regulares de este lenguaje visite 
nuestro sitio web y siga los enlaces correspondientes a este capitulo. 

<section> 

Siguiendo nuestro diseno estandar nos encontramos con las columnas que en la Figura 1-1 
llamamos Informacion Principal y Barra Lateral. Como explicamos anteriormente, la 
columna Informacion Principal contiene la informacion mas relevante del documento y 
puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o 
columnas). Debido a que el proposito de estas columnas es mas general, el elemento en 
HTML5 que especifica estas secciones se llama simplemente <section>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 
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<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<ul > 

<1i>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

</html> 


Listado 1-12. Usando el elemento <section>. 

Al igual que la Barra de Navegacion, la columna Informacion Principal es una seccion 
aparte. Por este motivo, la seccion para Informacion Principal va debajo de la etiqueta de 
cierre </nav>. 

Hagalo usted mismo: Compare el ultimo codigo en el Listado 1-12 con el diseno 
de la Figura 1-3 para comprender como las etiquetas son ubicadas en el codigo y 
que seccion cada una de ellas genera en la representacion visual de la pagina 
web. 

IMPORTANTE: Las etiquetas que representan cada seccion del documento estan 
localizadas en el codigo en forma de lista, unas sobre otras, pero en el sitio web 
algunas de estas secciones se ubicaran lado a lado (las columnas Informacion 
Principal y Barra Lateral son un claro ejemplo). En HTML5, la responsabilidad por 
la representacion de los elementos en la pantalla fue delegada a CSS. El diseno 
sera logrado asignando estilos CSS a cada elemento HTML. Estudiaremos CSS en 
el proximo capitulo. 

<aside> 

En un tipico diseno web (Figura 1-1) la columna llamada Barra Lateral se ubica al lado de 
la columna Informacion Principal. Esta es una columna o seccion que normalmente 
contiene datos relacionados con la informacion principal pero que no son relevantes o 
igual de importantes. 

En el diseno de un blog, por ejemplo, la Barra Lateral contendra una lista de enlaces. 
En el ejemplo de la Figura 1-2, los enlaces apuntan a cada una de las entradas del blog y 
ofrecen informacion adicional sobre el autor (numero 4). La informacion dentro de esta 
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barra esta relacionada con la informacion principal pero no es relevante por si misma. 
Siguiendo el mismo ejemplo podemos decir que las entradas del blog son relevantes pero 
los enlaces y las pequenas resenas sobre esas entradas son solo una ayuda para la 
navegacion pero no lo que al lector realmente le interesa. 

En HTML5 podemos diferenciar esta clase secundaria de informacion utilizando el 
elemento <aside>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 



<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

</body> 

</html> 


Listado 1-13. Usando el elemento <aside>. 

El elemento <aside> podria estar ubicado del lado derecho o izquierdo de nuestra 
pagina de ejemplo, la etiqueta no tiene una posicion predefinida. El elemento <aside> 
solo describe la informacion que contiene, no el lugar dentro de la estructura. Este 
elemento puede estar ubicado en cualquier parte del diseno y ser usado siempre y cuando 
su contenido no sea considerado como el contenido principal del documento. Por 
ejemplo, podemos usar <aside> dentro del elemento <section> o incluso insertado 
entre la informacion relevante, como en el caso de una cita. 


16 



Documentos HTML5 


<footer> 

Para finalizar la construccion de la plantilla o estructura elemental de nuestro documento 
HTML5, solo necesitamos un elemento mas. Ya contamos con la cabecera del cuerpo, 
secciones con ayuda para la navegacion, informacion importante y hasta una barra lateral 
con datos adicionales, por lo tanto lo unico que nos queda por hacer es cerrar nuestro 
diseno para otorgarle un final al cuerpo del documento. HTML5 provee un elemento 
especffico para este proposito llamado <footer>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el tltulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 



<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 
</aside> 

<footer> 

Derechos Reservados &copy; 2010-2011 

</footer> 

</body> 

</html> 


Listado 1-14. Usando el elemento <footer>. 

En el tfpico diseno de una pagina web (Figura 1-1) la seccion llamada Institutional sera 
definida por etiquetas <footer>. Esto es debido a que la barra representa el final (o pie) 
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del documento y esta parte de la pagina web es normalmente usada para compartir 
informacion general sobre el autor o la organizacion detras del proyecto. 

Generalmente, el elemento <footer> representara el final del cuerpo de nuestro 
documento y tendra el proposito descripto anteriormente. Sin embargo, <footer> 
puede ser usado multiples veces dentro del cuerpo para representar tambien el final de 
diferentes secciones (del mismo modo que la etiqueta <header>). Estudiaremos esta 
ultima caracteristica mas adelante. 

1.4 Dentro del cuerpo 

El cuerpo de nuestro documento esta listo. La estructura basica de nuestro sitio web fue 
finalizada, pero aun tenemos que trabajar en el contenido. Los elementos HTML5 
estudiados hasta el momento nos ayudan a identificar cada seccion del diseno y asignar 
un proposito intrinseco a cada una de ellas, pero lo que es realmente importante para 
nuestro sitio web se encuentra en el interior de estas secciones. 

La mayona de los elementos ya estudiados fueron creados para construir una 
estructura para el documento HTML que pueda ser identificada y reconocida por los 
navegadores y nuevos dispositivos. Aprendimos acerca de la etiqueta <body> usada para 
declarar el cuerpo o parte visible del documento, la etiqueta <header> con la que 
agrupamos informacion importante para el cuerpo, la etiqueta <nav> que provee ayuda 
para la navegacion del sitio web, la etiqueta <section> necesaria para contener la 
informacion mas relevante, y tambien <aside> y <footer> para ofrecer informacion 
adicional de cada seccion y del documento mismo. Pero ninguno de estos elementos 
declara algo acerca del contenido. Todos tienen un especifico proposito estructural. 

Mas profundo nos introducimos dentro del documento mas cerca nos encontramos de 
la definicion del contenido. Esta informacion estara compuesta por diferentes elementos 
visuales como titulos, textos, imagenes, videos y aplicaciones interactivas, entre otros. 
Necesitamos poder diferenciar estos elementos y establecer una relacion entre ellos 
dentro de la estructura. 

<article> 

El diseno considerado anteriormente (Figura 1-1) es el mas comun y representa una 
estructura esencial para los sitios web estos dias, pero es ademas ejemplo de como el 
contenido clave es mostrado en pantalla. Del mismo modo que los blogs estan divididos 
en entradas, sitios web normalmente presentan informacion relevante dividida en partes 
que comparten similares caracteristicas. El elemento <article> nos permite identificar 
cada una de estas partes: 


<!DOCTYPE html> 
<html lang="es"> 
<head> 
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<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el tltulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 

<nav> 

<ul > 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

Este es el texto de mi primer mensaje 

</article> 

<article> 

Este es el texto de mi segundo mensaje 
</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

<footer> 

Derechos Reservados &copy; 2010-2011 
</footer> 

</html> 


Listado 1-15. Usando el elemento <artide>. 

Como puede observarse en el codigo del Listado 1-15, las etiquetas <article> se 
encuentran ubicadas dentro del elemento <section>. Las etiquetas <article> en 
nuestro ejemplo pertenecen a esta seccion, son sus hijos, del mismo modo que cada 
elemento dentro de las etiquetas <body> es hijo del cuerpo. Y al igual que cada elemento 
hijo del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como es mostrado 
en la Figura 1-4. 

Conceptos basicos: Como dijimos anteriormente, la estructura de un documento 
HTML puede ser descripta como un arbol, con el elemento <htmi> como su raiz. 
Otra forma de describir la relacion entre elementos es nombrarlos como padres, 
hijos y hermanos, de acuerdo a la posicion que ocupan dentro de esa misma 
estructura. Por ejemplo, en un tipico documento HTML el elemento <body> es 
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hijo del elemento <html> y hermano del elemento <head>. Ambos, <body> y 
<head>, tienen al elemento <html> como su padre. 


<header> </header> 

<nav> </nav> 


<section> <aside> 


<article> </article> 


<article> </article> 


</section> </aside> 


<footer> </footer> 


Figura 1-4. Representation visual de las etiquetas <artitie> quefueron incluidas 
para contener information relevante de la pagina web. 

El elemento <article> no esta limitado por su nombre (no se limita, por ejemplo, a 
artlculos de noticias). Este elemento fue creado con la intencion de contener unidades 
independientes de contenido, por lo que puede incluir mensajes de foros, artlculos de una 
revista digital, entradas de blog, comentarios de usuarios, etc... Lo que hace es agrupar 
porciones de information que estan relacionadas entre si independientemente de su 
naturaleza. 

Como una parte independiente del documento, el contenido de cada elemento 
<article> tendra su propia estructura. Para definir esta estructura, podemos 
aprovechar la versatilidad de los elementos <header> y <footer> estudiados 
anteriormente. Estos elementos son portables y pueden ser usados no solo para definir 
los llmites del cuerpo sino tambien en cualquier section de nuestro documento: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

cmeta charset="iso-8859-l"> 
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<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<ul > 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

<header> 

<hl>Titulo del mensaje uno</hl> 

</header> 

Este es el texto de mi primer mensaje 

<p>comentarios (0)</p> 

</footer> 

</article> 

<article> 

<hl>Titulo del mensaje dos</hl> 

</header> 

Este es el texto de mi segundo mensaje 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

<footer> 

Derechos Reservados &copy; 2010-2011 
</footer> 

</body> 

</html> 


Listado 1-16. Construyendo la estructura de <article>. 

Los dos mensajes insertados en el codigo del Listado 1-16 fueron construidos con el 
elemento <article> y tienen una estructura especlfica. En la parte superior de esta 
estructura incluimos las etiquetas <header> conteniendo el titulo definido con el elemento 
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<hi>, debajo se encuentra el contenido mismo del mensaje y sobre el final, luego del texto, 
vienen las etiquetas <footer> especificando la cantidad de comentarios recibidos. 

<hgroup> 

Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de 
cada <article>, incorporamos elementos <hl> para declarar un titulo. Basicamente, las 
etiquetas <hi> son todo lo que necesitamos para crear una Ifnea de cabecera para cada 
parte del documento, pero es normal que necesitemos tambien agregar subtftulos o mas 
informacion que especifique de que se trata la pagina web o una seccion en particular. De 
hecho, el elemento <header> fue creado para contener tambien otros elementos como 
tablas de contenido, formularios de busqueda o textos cortos y logos. 

Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, 
como <hi>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que por 
propositos de procesamiento interno, y para evitar generar multiples secciones durante la 
interpretation del documento por parte del navegador, estas etiquetas deben ser 
agrupadas juntas. Poresta razon, HTML5 provee el elemento <hgroup>: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el tltulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 

<nav> 

<ul > 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section> 

<article> 

<hgroup> 

<hl>Titulo del mensaje uno</hl> 

<h2>Subtitulo del mensaje uno</h2> 

</hgroup> 

<p>publicado 10-12-2011</p> 
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</header> 

Este es el texto de mi primer mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje dos</hl> 
<h2>Subtitulo del mensaje dos</h2> 

</hgroup> 

<p>publicado 15-12-2011</p> 

</header> 

Este es el texto de mi segundo mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 
</aside> 

<footer> 

Derechos Reservados &copy; 2010-2011 
</footer> 

</body> 

</html> 


Listado 1-17. Usando el elemento <hgroup>. 

Las etiquetas H deben conservar su jerarqufa, lo que significa que debemos primero 
declarar la etiqueta <hi>, luego usar <h 2 > para subtitulos y asf sucesivamente. Sin 
embargo, a diferencia de anteriores versiones de HTML, HTML5 nos deja reusar las 
etiquetas H y construir esta jerarqufa una y otra vez en cada seccion del documento. En el 
ejemplo del Listado 1-17, agregamos un subtftulo y datos adicionales a cada mensaje. Los 
tftulos y subtitulos fueron agrupados juntos utilizando <hgroup>, recreando de este 
modo la jerarqufa <hl> y <h2> en cada elemento <article>. 

IMPORTANTE: El elemento <hgroup> es necesario cuando tenemos un tftulo y 
subtftulo o mas etiquetas H juntas en la misma cabecera. Este elemento puede 
contener solo etiquetas H y esta fue la razon por la que en nuestro ejemplo 
dejamos los datos adicionales afuera. Si solo dispone de una etiqueta <hi> o la 
etiqueta <hi> junto con datos adicionales, no tiene que agrupar estos elementos 
juntos. Por ejemplo, en la cabecera del cuerpo (<header>) no usamos este 
elemento porque solo tenemos una etiqueta H en su interior. Siempre recuerde 
que <hgroup> fue creado solo con la intencion de agrupar etiquetas H, 
exactamente como su nombre lo indica. 
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Navegadores y programas que ejecutan y presentan en la pantalla sitios webs leen el 
codigo HTML y crean su propia estructura interna para interpretar y procesar cada 
elemento. Esta estructura interna esta dividida en secciones que no tienen nada que ver 
con las divisiones en el diseno o el elemento <section>. Estas son secciones 
conceptuales generadas durante la interpretacion del codigo. El elemento <header> no 
crea una de estas secciones por sf mismo, lo que significa que los elementos dentro de 
<header> representaran diferentes niveles e internamente pueden generar diferentes 
secciones. El elemento <hgroup> fue creado con el proposito de agrupar las etiquetas H y 
evitar interpretaciones incorrectas por parte de los navegadores. 

Conceptos basicos: lo que llamamos "informacion adicional" dentro de la cabecera 
en nuestra descripcion previa es conocido como Metadata. Metadata es un conjunto 
de datos que describen y proveen informacion acerca de otro grupo de datos. En 
nuestro ejemplo, Metadata es la fecha en la cual cada mensaje fue publicado. 

<figure> y <figcaption> 

La etiqueta <figure> fue creada para ayudarnos a ser aun mas especificos a la hora de 
declarar el contenido del documento. Antes de que este elemento sea introducido, no 
podiamos identificar el contenido que era parte de la informacion pero a la vez 
independiente, como ilustraciones, fotos, videos, etc... Normalmente estos elementos son 
parte del contenido relevante pero pueden ser extrafdos o movidos a otra parte sin 
afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta clase de 
informacion, las etiquetas <figure> pueden ser usadas para identificarla: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<header> 

<hl>Este es el titulo principal del sitio web</hl> 
</header> 

<ul > 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 
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</nav> 

<section> 

<article> 

<hgroup> 

<hlsTitulo del mensaje uno</hl> 

<h2sSubtitulo del mensaje uno</h2> 

</hgroup> 

<p>publicado 10-12-2011</p> 

</header> 

Este es el texto de mi primer mensaje 

<figures 

<img src="http://minkbooks.com/content/myimage.jpg"> 
<figcaption> 

Esta es la imagen del primer mensaje 
</figcaptions 
</figures 

<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje dos</hl> 

<h2>Subtitulo del mensaje dos</h2> 

</hgroups 

<pspublicado 15-12-2011</ps 
</headers 

Este es el texto de mi segundo mensaje 
<footers 

<pscomentarios (0)</ps 
</footers 
</articles 
</sections 
<asides 

<blockquotesMensaje numero uno</blockquotes 
<blockquotesMensaje numero dos</blockquotes 
</asides 
<footers 

Derechos Reservados &copy; 2010-2011 
</footers 
</bodys 
</htmls 


Listado 1-18. Usando los elementos <figure> y <figcaption>. 

En el Listado 1-18, en el primer mensaje, luego del texto insertamos una imagen (<img 
src= "http://minkbooks. com/content/myimage. jpg" s). Esta es una practica 
comun, a menudo el texto es enriquecido con imagenes o videos. Las etiquetas <f igures 
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nos permiten envolver estos complementos visuales y diferenciarlos asf de la informacion 
mas relevante. 

Tambien en el Listado 1-18 se puede observar un elemento extra dentro de <f igure>. 
Normalmente, unidades de informacion como imagenes o videos son descriptas con un 
corto texto debajo. HTML5 provee un elemento para ubicar e identificar estos titulos 
descriptivos. Las etiquetas <figcaption> encierran el texto relacionado con <figure> y 
establecen una relacion entre ambos elementos y su contenido. 


1.5 Nuevos y viejos elementos 

HTML5 fue desarrollado con la intencion de simplificar, especificar y organizar el codigo. 
Para lograr este proposito, nuevas etiquetas y atributos fueron agregados y HTML fue 
completamente integrado a CSS y Javascript. Estas incorporaciones y mejoras de versiones 
previas estan relacionadas no solo con nuevos elementos sino tambien con como usamos 
los ya existentes. 

<mark> 

La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era 
considerado importante pero ahora es relevante acorde con las acciones del usuario. El 
ejemplo que mas se ajusta a este caso es un resultado de busqueda. El elemento <mark> 
resaltara la parte del texto que concuerda con el texto buscado: 


<span>Mi <mark>coche</mark> es rojo</span> 


Listado 1-19. Uso del elemento <mark> para resaltar la palabra "coche". 

Si un usuario realiza una busqueda de la palabra "coche", por ejemplo, los resultados 
podrfan ser mostrados con el codigo del Listado 1-19. La frase del ejemplo representa los 
resultados de la busqueda y las etiquetas <mark> en el medio encierran lo que era el 
texto buscado (la palabra "coche"). En algunos navegadores, esta palabra sera resaltada 
con un fondo amarillo por defecto, pero siempre podemos sobrescribir estos estilos con 
los nuestros utilizando CSS, como veremos en proximos capitulos. 

En el pasado, normalmente obtemamos similares resultados usando el elemento <b>. 
El agregado de <mark> tiene el objetivo de cambiar el significado y otorgar un nuevo 
proposito para estos y otros elementos relacionados: 

• <em> es para indicar enfasis (reemplazando la etiqueta <i> que utilizabamos 
anteriormente). 

• <strong> es para indicar importancia. 
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<mark> es para resaltar texto que es relevante de acuerdo con las 
circunstancias. 

<b> deberia ser usado solo cuando no hay otro elemento mas apropiado 
para la situacion. 


<small> 

La nueva especificidad de HTML es tambien evidente en elementos como <smaii>. 
Previamente este elemento era utilizado con la intencion de presentar cualquier texto con 
letra pequena. La palabra clave referenciaba el tamano del texto, independientemente de 
su significado. En HTML5, el nuevo proposito de <small> es presentar la llamada letra 
pequena, como impresiones legales, descargos, etc... 


<small>Derechos Reservados &copy; 2011 MinkBooks</small> 


Listado 1-20. Inclusion de informacion legal con el elemento <small>. 


<cite> 

Otro elemento que ha cambiado su naturaleza para volverse mas especffico es <cite>. 
Ahora las etiquetas <cite> encierran el titulo de un trabajo, como un libro, una pelfcula, 
una cancion, etc... 


<span>Amo la pellcula <cite>Tentaciones</citex/span> 


Listado 1-21. Citando una pellcula con el elemento <cite>. 


<address> 

El elemento <address> es un viejo elemento convertido en un elemento estructural. No 
necesitamos usarlo previamente para construir nuestra plantilla, sin embargo podria 
ubicarse perfectamente en algunas situaciones en las que debemos presentar informacion 
de contacto relacionada con el contenido del elemento <article> o el cuerpo completo. 

Este elemento deberia ser incluido dentro de <footer>, como en el siguiente 
ejemplo: 


<article> 

<header> 
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<hl>Titulo del mensaje </hl> 

</header> 

Este es el texto del mensaje 

<address> 

<a href="http://www.jdgauchat.com">JD Gauchat</a> 

</address> 


Listado 1-22. Agregando informacion de contacto a un <article>. 


<time> 

En cada <article> de nuestra ultima plantilla (Listado 1-18), incluimos la fecha 
indicando cuando el mensaje fue publicado. Para esto usamos un simple elemento <p> 
dentro de la cabecera (<header>) del mensaje, pero existe un elemento en HTML5 
especffico para este proposito. El elemento <time> nos permite declarar un texto 
comprensible para humanos y navegadores que representa fecha y hora: 


:article> 

<header> 

<hl>Tltulo del mensaje dos</hl> 

ctime datetime= n 2011-10-12" pubdate>publicado 12-10-2011</time> 

</header> 

Este es el texto del mensaje 


Listado 1-23. Fecha y hora usando el elemento <time>. 

En el Listado 1-23, el elemento <p> usado en ejemplos previos fue reemplazado por el 
nuevo elemento <time> para mostrar la fecha en la que el mensaje fue publicado. El 
atributo datetime tiene el valor que representa la fecha comprensible para el navegador 
(timestamp). El formato de este valor debera seguir un patron similar al del siguiente 
ejemplo: 2011-10-12T12:10:45. Tambien incluimos el atributo pubdate, el cual solo es 
agregado para indicar que el valor del atributo datetime representa la fecha de 
publicacion. 

1.6 Referencia rapida 

En la especificacion HTML5, HTML esta a cargo de la estructura del documento y provee 
un grupo completo de nuevos elementos para este proposito. La especificacion tambien 
incluye algunos elementos con la unica tarea de proveer estilos. Esta es una lista de los 
que consideramos mas relevantes: 
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IMPORTANTE: Para una completa referencia de los elementos HTML incluidos en 
la especificacion, visite nuestro sitio web y siga los enlaces correspondientes a 
este capltulo. 

<header> Este elemento presenta informacion introductoria y puede ser aplicado en 
diferentes secciones del documento. Tiene el proposito de contener la cabecera de 
una seccion pero tambien puede ser utilizado para agrupar indices, formularios de 
busqueda, logos, etc... 

<nav> Este elemento indica una seccion de enlaces con propositos de navegacion, como 
menus o Indices. No todos los enlaces dentro de una pagina web tienen que estar 
dentro de un elemento <nav>, solo aquellos que forman partes de bloques de 
navegacion. 

<section> Este elemento representa una seccion general del documento. Es usualmente 
utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el 
proposito de ordenar el contenido que comparte una caracteristica espedfica, como 
capitulos o paginas de un libro, grupo de noticias, articulos, etc... 

<aside> Este elemento representa contenido que esta relacionado con el contenido 
principal pero no es parte del mismo. Ejemplos pueden ser citas, informacion en barras 
laterales, publicidad, etc... 

<footer> Este elemento representa informacion adicional sobre su elemento padre. Por 
ejemplo, un elemento <footer> insertado al final del cuerpo proveera informacion 
adicional sobre el cuerpo del documento, como el pie normal de una pagina web. 
Puede ser usado no solo para el cuerpo sino tambien para diferentes secciones dentro 
del cuerpo, otorgando informacion adicional sobre estas secciones especificas. 

<article> Este elemento representa una porcion independiente de informacion relevante 
(por ejemplo, cada articulo de un periodico o cada entrada de un blog). El elemento 
<article> puede ser anidado y usado para mostrar una lista dentro de otra lista de 
items relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo. 
<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene 
multiples niveles (por ejemplo, una cabecera con titulo y subtitulo). 

<figure> Este elemento representa una porcion independiente de contenido (por ejemplo, 
imagenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es 
informacion que puede ser removida sin afectar el fluido del resto del contenido. 
<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeno texto 
relacionado con el contenido de un elemento <figure>, como la descripcion de una 
imagen. 

<mark> Este elemento resalta un texto que tiene relevancia en una situacion en particular 
o que ha sido mostrado en respuesta de la actividad del usuario. 

<small> Este elemento representa contenido al margen, como letra pequena (por 
ejemplo, descargos, restricciones legales, declaracion de derechos, etc...). 

<cite> Este elemento es usado para mostrar el titulo de un trabajo (libro, pelicula, poema, 
etc...). 
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<address> Este elemento encierra informacion de contacto para un elemento <article> 
o el documento completo. Es recomendable que sea insertado dentro de un elemento 
<footer>. 

<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por 
los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas 
mientras que el especffico para programas y navegadores es incluido como el valor del 
atributo datetime. Un segundo atributo optativo llamado pubdate es usado para 
indicar que el valor de datetime es la fecha de publicacion. 
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2.1 CSS y HTML 


Como aclaramos anteriormente, la nueva especificacion de HTML (HTML5) no describe 
solo los nuevos elementos HTML o el lenguaje mismo. La web demanda diseno y 
funcionalidad, no solo organizacion estructural o definicion de secciones. En este nuevo 
paradigma, HTML se presenta junto con CSS y Javascript como un unico instrumento 
integrado. 

La funcion de cada tecnologfa ya ha sido explicada en capitulos previos, asi como los 
nuevos elementos HTML responsables de la estructura del documento. Ahora es 
momento de analizar CSS, su relevancia dentro de esta union estrategica y su influencia 
sobre la presentacion de documentos HTML. 

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificacion y 
nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las 
limitaciones y reducir la complejidad de HTML. Al comienzo, atributos dentro de las 
etiquetas HTML proveian estilos esenciales para cada elemento, pero a medida que el 
lenguaje evoluciono, la escritura de codigos se volvio mas compleja y HTML por si mismo 
no pudo mas satisfacer las demandas de disenadores. En consecuencia, CSS pronto fue 
adoptado como la forma de separar la estructura de la presentacion. Desde entonces, CSS 
ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las 
necesidades de los disenadores y apartado del proceso de evolucion de HTML. 

La version 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La 
especificacion de HTML5 fue desarrollada considerando CSS a cargo del diseno. Debido a 
esta consideracion, la integracion entre HTML y CSS es ahora vital para el desarrollo web y 
esta es la razon por la que cada vez que mencionamos HTML5 tambien estamos haciendo 
referencia a CSS3, aunque oficialmente se trate de dos tecnologias completamente 
separadas. 

En este momento las nuevas caracteristicas incorporadas en CSS3 estan siendo 
implementadas e incluidas junto al resto de la especificacion en navegadores compatibles 
con HTML5. En este capitulo, vamos a estudiar conceptos basicos de CSS y las nuevas 
tecnicas de CSS3 ya disponibles para presentacion y estructuracion. Tambien 
aprenderemos como utilizar los nuevos selectores y pseudo clases que hacen mas facil la 
seleccion e identificacion de elementos HTML. 
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Conceptos basicos: CSS es un lenguaje que trabaja junto con HTML para proveer 
estilos visuales a los elementos del documento, como tamano, color, fondo, 
bordes, etc... 

IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 estan siendo 
implementadas en las ultimas versiones de los navegadores mas populares, pero 
algunas de ellas se encuentran aun en estado experimental. Por esta razon, estos 
nuevos estilos deberan ser precedidos por prefijos tales como -moz- o -webkit- 
para ser efectivamente interpretados. Analizaremos este importante asunto mas 
adelante. 


2.2 Estilos y estructura 

A pesar de que cada navegador garantiza estilos por defecto para cada uno de los 
elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de cada 
disenador. Normalmente se encuentran muy distanciados de lo que queremos para 
nuestros sitios webs. Disenadores y desarrolladores a menudo deben aplicar sus propios 
estilos para obtener la organizacion y el efecto visual que realmente desean. 

IMPORTANTE: En esta parte del capltulo vamos a revisar estilos CSS y explicar 
algunas tecnicas basicas para definir la estructura de un documento. Si usted ya 
se encuentra familiarizado con estos conceptos, sientase libre de obviar las 
partes que ya conoce. 

Elementos block 

Con respecto a la estructura, basicamente cada navegador ordena los elementos por 
defecto de acuerdo a su tipo: block (bloque) o inline (en linea). Esta clasificacion esta 
asociada con la forma en que los elementos son mostrados en pantalla. 

• Elementos block son posicionados uno sobre otro hacia abajo en la pagina. 

• Elementos inline son posicionados lado a lado, uno al lado del otro en la misma 
linea, sin ningun salto de linea a menos que ya no haya mas espacio horizontal 
para ubicarlos. 

Casi todos los elementos estructurales en nuestros documentos seran tratados por los 
navegadores como elementos block por defecto. Esto significa que cada elemento HTML 
que representa una parte de la organizacion visual (por ejemplo, <section>, <nav>, 
<header>, <footer>, <div>) sera posicionado debajo del anterior. 

En el Capitulo 1 creamos un documento HTML con la intencion de reproducir un sitio web 
tradicional. El diseno incluyo barras horizontales y dos columnas en el medio. Debido a la 
forma en que los navegadores muestran estos elementos por defecto, el resultado en la 
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pantalla esta muy lejos de nuestras expectativas. Tan pronto como el archivo HTML con el 
codigo del Listado 1-18, Capitulo 1, es abierto en el navegador, la posicion erronea en la 
pantalla de las dos columnas definidas por los elementos <section> y <aside> es 
claramente visible. Una columna esta debajo de la otra en lugar de estar a su lado, como 
corresponderla. Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan 
alto como la informacion que contiene y uno sobre otro, como se muestra en la Figura 2-1. 



Modelos de caja 

Para aprender como podemos crear nuestra propia organizacion de los elementos en 
pantalla, debemos primero entender como los navegadores procesan el codigo HTML. Los 
navegadores consideran cada elemento HTML como una caja. Una pagina web es en 
realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son 
establecidas por estilos provistos por los navegadores o por los disenadores usando CSS. 

CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos 
provistos por navegadores y obtener la organizacion deseada. Estas propiedades no son 
especificas, tienen que ser combinadas para formar reglas que luego seran usadas para 
agrupar cajas y obtener la correcta disposicion en pantalla. La combinacion de estas reglas 
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es normalmente llamada modelo o sistema de disposition. Todas estas reglas aplicadas 
juntas constituyen lo que se llama un modelo de caja. 

Existe solo un modelo de caja que es considerado estandar estos dias, y muchos otros 
que aun se encuentran en estado experimental. El modelo valido y ampliamente adoptado 
es el llamado Modelo de Caja Tradicional, el cual ha sido usado desde la primera version 
de CSS. 

Aunque este modelo ha probado ser efectivo, algunos modelos experimentales 
intentan superar sus deficiencias, pero la falta de consenso sobre el reemplazo mas 
adecuado aun mantiene a este viejo modelo en vigencia y la mayoria de los sitios webs 
programados en HTML5 lo continuan utilizando. 


2.3 Conceptos basicos sobre estilos 

Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un modelo 
de caja, debemos revisar los conceptos basicos sobre estilos CSS que van a ser utilizados 
en el resto del libro. 

Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en 
pantalla. Como explicamos anteriormente, los navegadores proveen estilos por defecto 
que en la mayoria de los casos no son suficientes para satisfacer las necesidades de los 
disenadores. Para cambiar esto, podemos sobrescribir estos estilos con los nuestros 
usando diferentes tecnicas. 

Conceptos basicos: En este libro encontrara solo una introduccion breve a los 
estilos CSS. Solo mencionamos las tecnicas y propiedades que necesita conocer 
para entender los temas y codigos estudiados en proximos capitulos. Si considera 
que no tiene la suficiente experiencia en CSS y necesita mayor informacion visite 
nuestro sitio web y siga los enlaces correspondientes a este capitulo. 

Hagalo usted mismo: Dentro de un archivo de texto vacio, copie cada codigo 
HTML estudiado en los siguientes listados y abra el archivo en su navegador para 
comprobar su funcionamiento. Tenga en cuenta que el archivo debe tener la 
extension. html para ser abierto y procesado correctamente. 

Estilos en linea 

Una de las tecnicas mas simples para incorporar estilos CSS a un documento HTML es la de 
asignar los estilos dentro de las etiquetas por medio del atributo style. 

El Listado 2-1 muestra un documento HTML simple que contiene el elemento <p> 
modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el 
tamano por defecto del texto dentro del elemento <p> a un nuevo tamano de 20 pixeles. 
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<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Este es el titulo del documento</title> 
</head> 

<body> 

<p style="font-size: 20px">Mi texto</p> 


</html> 


Listado 2-1. Estilos CSS dentro de etiquetas HTML. 

Usar la tecnica demostrada anteriormente es una buena manera de probar estilos y 
obtener una vista rapida de sus efectos, pero no es recomendado para aplicar estilos a 
todo el documento. La razon es simple: cuando usamos esta tecnica, debemos escribir y 
repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando 
el tamano del documento a proporciones inaceptables y haciendolo imposible de 
mantener y actualizar. Solo imagine lo que ocurrirfa si decide que en lugar de 20 pixeles el 
tamano de cada uno de los elementos <p> deberfa ser de 24 pixeles. Tendria que 
modificar cada estilo en cada etiqueta <p> en el documento completo. 

Estilos embebidos 

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar 
referencias para afectar los elementos HTML correspondientes: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<style> 

p { font-size: 20px } 

</style> 

</head> 

<body> 

<p>Mi texto</p> 

</body> 

</html> 


Listado 2-2. Estilos listados en la cabecera del documento. 

El elemento <style> (mostrado en el Listado 2-2) permite a los desarrolladores 
agrupar estilos CSS dentro del documento. En versiones previas de HTML era necesario 
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especificar que tipo de estilos serian insertados. En HTML5 los estilos por defecto son CSS, 
por lo tanto no necesitamos agregar ningun atributo en la etiqueta de apertura <style>. 

El codigo resaltado del Listado 2-2 tiene la misma funcion que la linea de codigo del 
Listado 2-1, pero en el Listado 2-2 no tuvimos que escribir el estilo dentro de cada 
etiqueta <p> porque todos los elementos <p> ya fueron afectados. Con este metodo, 
reducimos nuestro codigo y asignamos los estilos que queremos a elementos espedficos 
utilizando referencias. Veremos mas sobre referencias en este capitulo. 

Archivos externos 

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al codigo mas 
consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en 
todos los documentos de nuestro sitio web. La solucion es mover todos los estilos a un 
archivo externo y luego utilizar el elemento <iink> para insertar este archivo dentro de 
cada documento que los necesite. Este metodo nos permite cambiar los estilos por 
completo simplemente incluyendo un archivo diferente. Tambien nos permite modificar o 
adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos al final 
del libro. 

En el Capitulo 1, estudiamos la etiqueta <iink> y como utilizarla para insertar 
archivos con estilos CSS en nuestros documentos. Utilizando la linea clink 
rel="stylesheet" href="misestilos.css"> le decimos al navegador que cargue el 
archivo misestiios.css porque contiene todos los estilos necesitados para presentar el 
documento en pantalla. Esta practica fue ampliamente adoptada por disenadores que ya 
estan trabajando con HTML5. La etiqueta <link> referenciando el archivo CSS sera 
insertada en cada uno de los documentos que requieren de esos estilos: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

clink rel="stylesheet" href="misestilos.css"> 

c/head> 

cbody> 

cp>Mi textoc/p> 
c/body> 
c/html> 


Listado 2-3. Aplicando estilos CSS desde un archivo externo. 

Hagalo usted mismo: De ahora en adelante agregaremos estilos CSS al archivo 
llamado misestiios.css. Debe crear este archivo en el mismo directorio 
(carpeta) donde se encuentra el archivo HTML y copiar los estilos CSS en su 
interior para comprobar como trabajan. 
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Conceptos basicos: Los archivos CSS son archivos de texto comunes. Al igual que 
los archivos HTML, puede crearlos utilizando cualquier editor de texto como el 
Bloc de Notas de Windows, por ejemplo. 

Referencias 

Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de 
cada documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo 
sin buenos mecanismos que nos ayuden a establecer una especifica relacion entre estos 
estilos y los elementos del documento que van a ser afectados. 

Cuando hablabamos sobre como incluir estilos en el documento, mostramos una de las 
tecnicas utilizadas a menudo en CSS para referenciar elementos HTML. En el Listado 2-2, el 
estilo para cambiar el tamano de la letra referenciaba cada elemento <p> usando la palabra 
clave p. De esta manera el estilo insertado entre las etiquetas <styie> referenciaba cada 
etiqueta <p> del documento y asignaba ese estilo particular a cada una de ellas. 

Existen varios metodos para seleccionar cuales elementos HTML seran afectados por 
las reglas CSS: 

• referencia por la palabra clave del elemento 

• referencia por el atributo id 

• referencia por el atributo class 

Mas tarde veremos que CSS3 es bastante flexible a este respecto e incorpora nuevas y 
mas especificas tecnicas para referenciar elementos, pero por ahora aplicaremos solo 
estas tres. 

Referenciando con palabra clave 

Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada 
elemento de la misma clase en el documento. Por ejemplo, la siguiente regia cambiara los 
estilos de todos los elementos <p>: 


p { font-size: 20px } 


Listado 2-4. Referenciando por palabra clave. 

Esta es la tecnica presentada previamente en el Listado 2-2. Utilizando la palabra clave 
p al frente de la regia le estamos diciendo al navegador que esta regia debe ser aplicada a 
cada elemento <p> encontrado en el documento HTML. Todos los textos envueltos en 
etiquetas <p> tendran el tamano de 20 pixeles. 

Por supuesto, lo mismo funcionara para cualquier otro elemento HTML. Si 
especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre etiquetas 
<span> tendra un tamano de 20 pixeles: 
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span { font-size: 20px } 


Listado 2-5. Referenciando por otra palabra clave. 

iPero que ocurre si solo necesitamos referenciar una etiqueta especffica? dDebemos 
usar nuevamente el atributo style dentro de esta etiqueta? La respuesta es no. Como 
aprendimos anteriormente, el metodo de Estilos en Lfnea (usando el atributo style 
dentro de etiquetas HTML) es una tecnica en desuso y deberfa ser evitada. Para 
seleccionar un elemento HTML especlfico desde las reglas de nuestro archivo CSS, 
podemos usar dos atributos diferentes: id y class. 

Referenciando con el atributo id 

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de 
este atributo no puede ser duplicado. Este nombre debe ser unico en todo el documento. 

Para referenciar un elemento en particular usando el atributo id desde nuestro 
archivo CSS la regia debe ser declarada con el slmbolo # al frente del valor que usamos 
para identificar el elemento: 


#textol { font-size: 20px } 

Listado 2-6. Referenciando a traves del valor del atributo id. 

La regia en el Listado 2-6 sera aplicada al elemento HTML identificado con el atributo 
id="textol". Ahora nuestro codigo HTML lucira de esta manera: 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Este texto es el tltulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<p id="textol">Mi texto</p> 

</body> 

</html> 


Listado 2-7. Identificando el elemento <p> a traves de su atributo id. 

El resultado de este procedimiento es que cada vez que hacemos una referenda 
usando el identificador textol en nuestro archivo CSS, el elemento con ese valor de id 
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sera modificado, pero el resto de los elementos <p>, o cualquier otro elemento en el 
mismo documento, no seran afectados. 

Esta es una forma extremadamente especffica de referenciar un elemento y es 
normalmente utilizada para elementos mas generales, como etiquetas estructurales. El 
atributo id y su especificidad es de hecho mas apropiado para referencias en Javascript, 
como veremos en proximos capitulos. 

Referenciando con el atributo class 

La mayorfa del tiempo, en lugar de utilizar el atributo id para propositos de estilos es 
mejor utilizar class. Este atributo es mas flexible y puede ser asignado a cada elemento 
HTML en el documento que comparte un diseno similar: 


.textol { font-size: 20px } 


Listado 2-8. Referenciando por el valor del atributo class. 

Para trabajar con el atributo class, debemos declarar la regia CSS con un punto antes del 
nombre. La ventaja de este metodo es que insertar el atributo class con el valor textol sera 
suficiente para asignar estos estilos a cualquier elemento que queramos: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
clink rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<p class="textol">Mi texto</p> 

<p class="textol">Mi texto</p> 

<p>Mi texto</p> 

</body> 

</html> 


Listado 2-9. Asignando estilos a varios elementos a traves del atributo class. 

Los elementos <p> en las primeras dos Ifneas dentro del cuerpo del codigo en el 
Listado 2-9 tienen el atributo class con el valor textol. Como dijimos previamente, la 
misma regia puede ser aplicada a diferentes elementos en el mismo documento. Por lo 
tanto, estos dos primeros elementos comparten la misma regia y ambos seran afectados 
por el estilo del Listado 2-8. El ultimo elemento <p> conserva los estilos por defecto 
otorgados por el navegador. 
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La razon por la que debemos utilizar un punto delante del nombre de la regia es que es 
posible construir referencias mas complejas. Por ejemplo, se puede utilizar el mismo valor para 
el atributo class en diferentes elementos pero asignar diferentes estilos para cada tipo: 


p.textol { font-size: 20px } 


Listado 2-10. Referenciando solo elementos <p> a traves del valor del atributo class. 

En el Listado 2-10 creamos una regia que referenda la clase llamada textoi pero solo 
para los elementos de tipo <p>. Si cualquier otro elemento tiene el mismo valor en su 
atributo class no sera modificado por esta regia en particular. 

Referenciando con cualquier atributo 

Aunque los metodos de referencia estudiados anteriormente cubren un variado espectro 
de situaciones, a veces no son suficientes para encontrar el elemento exacto. La ultima 
version de CSS ha incorporado nuevas formas de referenciar elementos HTML. Uno de 
ellas es el Selector de Atributo. Ahora podemos referenciar un elemento no solo por los 
atributos id y class sino tambien a traves de cualquier otro atributo: 


p [name] { font-size: 20px } 

Listado 2-11. Referenciando solo elementos <p> que tienen el atributo name. 

La regia en el Listado 2-11 cambia solo elementos <p> que tienen un atributo llamado 
name. Para imitar lo que hicimos previamente con los atributos id y class, podemos 
tambien especificar el valor del atributo: 

p[name="mitexto"] { font-size: 20px } 

Listado 2-12. Referenciando elementos <p> que tienen un atributo name con el valor mitexto. 
CSS3 permite combinar "=" con otros para hacer una seleccion mas espedfica: 


p[name^="mi"] { font-size: 20px } 
p[name$="mi"] { font-size: 20px } 
p[name*="mi"] { font-size: 20px } 


Listado 2-13. Nuevos selectores en CSS3. 
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Si usted conoce Expresiones Regulares desde otros lenguajes como Javascript o PHP, 
podra reconocer los selectores utilizados en el Listado 2-13. En CSS3 estos selectores 
producer) similares resultados: 

• La regia con el selector sera asignada a todo elemento <p> que contiene un 
atributo name con un valor comenzado en "mi" (por ejemplo, "mitexto", "micasa"). 

• La regia con el selector $= sera asignada a todo elemento <p> que contiene un 
atributo name con un valor finalizado en "mi" (por ejemplo "textomi", "casami"). 

• La regia con el selector *= sera asignada a todo elemento <p> que contiene un 
atributo name con un valor que incluye el texto "mi" (en este caso, el texto 
podria tambien encontrarse en el medio, como en "textomicasa"). 

En estos ejemplos usamos el elemento <p>, el atributo name, y una cadena de texto al 
azar como "mi", pero la misma tecnica puede ser utilizada con cualquier atributo y valor 
que necesitemos. Solo tiene que escribir los corchetes e insertar entre ellos el nombre del 
atributo y el valor que necesita para referenciar el elemento HTML correcto. 

Referenciando con pseudo clases 

CSS3 tambien incorpora nuevas pseudo clases que hacen la seleccion aun mas especifica. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<div id="wrapper"> 

<p class="mitextol">Mi textol</p> 

<p class="mitexto2">Mi texto2</p> 

<p class="mitexto3">Mi texto3</p> 

<p class="mitexto4">Mi texto4</p> 

</div> 

</html> 


Listado 2-14. Plantilla para probar pseudo clases. 

Miremos por un momento el nuevo codigo HTML del Listado 2-14. Contiene cuatro 
elementos <p> que, considerando la estructura HTML, son hermanos entre si e hijos del 
mismo elemento <div>. 

Usando pseudo clases podemos aprovechar esta organizacion y referenciar un 
elemento especifico sin importar cuanto conocemos sobre sus atributos y el valor de los 
mismos: 
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p:nth-child(2){ 

background: #999999; 

} 


Listado 2-15. Pseudo close nth-child(). 

La pseudo clase es agregada usando dos puntos luego de la referenda y antes del su 
nombre. En la regia del Listado 2-15 referendamos solo elementos <p>. Esta regia puede 
incluir otras referencias. Por ejemplo, podriamos escribirla como .miclase:nth- 
chiid (2 ) para referenciartodo elemento que es hijo de otro elemento y tiene el valor de 
su atributo class igual a miclase. La pseudo clase puede ser aplicada a cualquier tipo de 
referenda estudiada previamente. 

La pseudo clase nth-child 0 nos permite encontrar un hijo especifico. Como ya 
explicamos, el documento HTML del Listado 2-14 tiene cuatro elementos <p> que son 
hermanos. Esto significa que todos ellos tienen el mismo padre que es el elemento <div>. 
Lo que esta pseudo clase esta realmente indicando es algo como: "el hijo en la posicion..." 
por lo que el numero entre parentesis sera el numero de la posicion del hijo, o indice. La 
regia del Listado 2-15 esta referenciando cada segundo elemento <p> encontrado en el 
documento. 

Hagalo usted mismo: Reemplace el codigo en su archivo HTML por el del Listado 2- 
14 y abra el archivo en su navegador. Incorpore las reglas estudiadas en el Listado 
2-15 dentro del archivo misestilos. css para comprobar su funcionamiento. 

Usando este metodo de referencia podemos, por supuesto, seleccionar cualquier hijo 
que necesitemos cambiando el numero de indice. Por ejemplo, la siguiente regia tendra 
impacto solo sobre el ultimo elemento <p> de nuestra plantilla: 


p:nth-child(4){ 

background: #999999; 

} 


Listado 2-16. Pseudo clase nth-child(). 

Como seguramente se habra dado cuenta, es posible asignar estilos a todos los 
elementos creando una regia para cada uno de ellos: 


*{ 

margin: 

} 


Opx; 
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p:nth-child(1){ 

background: #999999; 

} 

p:nth-child(2){ 

background: ttCCCCCC; 

} 

p:nth-chiId(3){ 

background: #999999; 

} 

p:nth-child(4){ 

background: #CCCCCC; 

} 


Listado 2-17. Creando una lista con la pseudo close nth-child(). 

La primera regia del Listado 2-17 usa el selector universal * para asignar el mismo 
estilo a cada elemento del documento. Este nuevo selector representa cada uno de los 
elementos en el cuerpo del documento y es util cuando necesitamos establecer ciertas 
reglas basicas. En este caso, configuramos el margen de todos los elementos en 0 pixeles 
para evitar espacios en bianco o Ifneas vacias como las creadas por el elemento <p> por 
defecto. 

En el resto del codigo del Listado 2-17 usamos la pseudo clase nth-child () para 
generar un menu o lista de opciones que son diferenciadas claramente en la pantalla por 
el color de fondo. 

Hagalo usted mismo: Copie el ultimo codigo dentro del archivo CSS y abra el 
documento HTML en su navegador para comprobar el efecto. 

Para agregar mas opciones al menu, podemos incorporar nuevos elementos <p> en el 
codigo HTML y nuevas reglas con la pseudo clase nth-child () usando el numero de 
fndice adecuado. Sin embargo, esta aproximacion genera mucho codigo y resulta 
imposible de aplicar en sitios webs con contenido dinamico. Una alternativa para obtener 
el mismo resultado es aprovechar las palabras clave odd y even disponibles para esta 
pseudo clase: 


*{ 

margin: Opx; 

} 

p:nth-child(odd) { 

background: #999999; 

} 

p:nth-child(even) { 
background: #CCCCCC; 

} 


Listado 2-18. Aprovechando las palabras clave odd y even. 
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Ahora solo necesitamos dos reglas para crear la lista completa. Incluso si mas adelante 
agregamos otras opciones, los estilos seran asignados automaticamente a cada una de 
ellas de acuerdo a su posicion. La palabra clave odd para la pseudo clase nth-child 0 
afecta los elementos <p> que son hijos de otro elemento y tienen un indice impar. La 
palabra clave even, por otro lado, afecta a aquellos que tienen un fndice par. 

Existen otras importantes pseudo clases relacionadas con esta ultima, como first- 
child, last-child y only-child, algunas de ellas recientemente incorporadas. La 
pseudo clase first-child referenda solo el primer hijo, last-child referenda solo el 
ultimo hijo, y only-child afecta un elemento siempre y cuando sea el unico hijo 
disponible. Estas pseudo clases en particular no requieren palabras clave o parametros, y 
son implementadas como en el siguiente ejemplo: 


*{ 

margin: Opx; 

} 

p:last-child{ 

background: #999999; 

} 


Listado 2-19. Usando last-child para modificar solo el ultimo elemento <p> de la lista. 
Otra importante pseudo clase llamada not () es utilizada realizar una negacion: 


:not(p){ 

margin: Opx; 

} 


Listado 2-20. Aplicando estilos a cada elemento, excepto <p>. 

La regia del Listado 2-20 asignara un margen de 0 pixeles a cada elemento del documento 
excepto los elementos <p>. A diferencia del selector universal utilizado previamente, la pseudo 
clase not 0 nos permite declarar una excepcion. Los estilos en la regia creada con esta pseudo 
clase seran asignados a todo elemento excepto aquellos incluidos en la referenda entre 
parentesis. En lugar de la palabra clave de un elemento podemos usar cualquier otra referenda 
que deseemos. En el proximo listado, por ejemplo, todos los elementos seran afectados 
excepto aquellos con el valor mitexto2 en el atributo class: 


:not(.mitexto2){ 
margin: Opx; 

} 


Listado 2-21. Excepcion utilizando el atributo class. 
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Cuando aplicamos la ultima regia al codigo HTML del Listado 2-14 el navegador asigna 
los estilos por defecto al elemento <p> identificado con el atributo class y el valor 
mitexto2 y provee un margen de 0 pixeles al resto. 

Nuevos selectores 

Hay algunos selectores mas que fueron agregados o que ahora son considerados parte de 
CSS3 y pueden ser utiles para nuestros disenos. Estos selectores usan los simbolos >, + y - 
para especificar la relacion entre elementos. 


div > p,mitexto2{ 
color: #990000; 

} 


Listado 2-22. Selector >. 

El selector > esta indicando que el elemento a ser afectado por la regia es el elemento 
de la derecha cuando tiene al de la izquierda como su padre. La regia en el Listado 2-22 
modifica los elementos <p> que son hijos de un elemento <div>. En este caso, fuimos 
bien especificos y referenciamos solamente el elemento <p> con el valor mi texto2 en su 
atributo class. 

El proximo ejemplo construye un selector utilizando el simbolo +. Este selector 
referencia al elemento de la derecha cuando es inmediatamente precedido por el de la 
izquierda. Ambos elementos deben compartir el mismo padre: 


p.mitexto2 + p{ 
color: #990000; 

} 


Listado 2-23. Selector +. 

La regia del Listado 2-23 afecta al elemento <p> que se encuentra ubicado luego de 
otro elemento <p> identificado con el valor mitexto2 en su atributo class. Si abre en su 
navegador el archivo HTML con el codigo del Listado 2-14, el texto en el tercer elemento 
<p> aparecera en la pantalla en color rojo debido a que este elemento <p> en particular 
esta posicionado inmediatamente despues del elemento <p> identificado con el valor 
mitexto2 en su atributo class. 

El ultimo selector que estudiaremos es el construido con el simbolo -. Este selector es 
similar al anterior pero el elemento afectado no necesita estar precediendo de inmediato 
al elemento de la izquierda. Ademas, mas de un elemento puede ser afectado: 
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p.mitexto2 ~ p{ 
color: #990000; 

} 


Listado 2-24. Selector 

La regia del Listado 2-24 afecta al tercer y cuarto elemento <p> de nuestra plantilla de 
ejemplo. El estilo sera aplicado a todos los elementos <p> que son hermanos y se 
encuentran luego del elemento <p> identificado con el valor mitexto2 en su atributo 
class. No importa si otros elementos se encuentran intercalados, los elementos <p> en 
la tercera y cuarta posicion aun seran afectados. Puede verificar esto ultimo insertando un 
elemento <span>mitexto</span> luego del elemento <p> que tiene el valor mitexto2 
en su atributo class. A pesar de este cambio solo los elementos <p> seran modificados 
por esta regia. 


2.4 Aplicando CSS a nuestra plantilla 

Como aprendimos mas temprano en este mismo capltulo, todo elemento estructural es 
considerado una caja y la estructura completa es presentada como un grupo de cajas. Las 
cajas agrupadas constituyen lo que es llamado un Modelo de Caja. 

Siguiendo con los conceptos basicos de CSS, vamos a estudiar lo que es llamado el 
Modelo de Caja Tradicional. Este modelo has sido implementado desde la primera version 
de CSS y es actualmente soportado por cada navegador en el mercado, lo que lo ha 
convertido en un estandar para el diseno web. 

Todo modelo, incluso aquellos aun en fase experimental, pueden ser aplicados a la 
misma estructura HTML, pero esta estructura debe ser preparada para ser afectada por 
estos estilos de forma adecuada. Nuestros documentos HTML deberan ser adaptados al 
modelo de caja seleccionado. 

IMPORTANTE: El Modelo de Caja Tradicional presentado posteriormente no es una 
incorporacion de HTML5, pero es introducido en este libro por ser el unico disponible 
en estos momentos y posiblemente el que continuara siendo utilizado en sitios webs 
desarrollados en HTML5 durante los proximos anos. Si usted ya conoce como 
implementarlo, sientase en libertad de obviar esta parte del capltulo. 


2.5 Modelo de caja tradicional 


Todo comenzo con tablas. Las tablas fueron los elementos que sin intencion se volvieron la 
herramienta ideal utilizada por desarrolladores para crear y organizar cajas de contenido en 
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la pantalla. Este puede ser considerado el primer modelo de caja de la web. Las cajas eran 
creadas expandiendo celdas y combinando filas de celdas, columnas de celdas y tablas 
enteras, unas sobre otras o incluso anidadas. Cuando los sitios webs crecieron y se volvieron 
mas y mas complejos esta practica comenzo a presentar serios problemas relacionados con 
el tamano y el mantenimiento del codigo necesario para crearlos. 

Estos problemas iniciales hicieron necesario lo que ahora vemos como una practica 
natural: la division entre estructura y presentacion. Usando etiquetas <div> y estilos CSS 
fue posible reemplazar la funcion de tablas y efectivamente separar la estructura HTML de 
la presentacion. Con elementos <div> y CSS podemos crear cajas en la pantalla, 
posicionar estas cajas a un lado o a otro y darles un tamano, color o borde especifico entre 
otras caracteristicas. CSS provee propiedades espedficas que nos permiten organizar las 
cajas acorde a nuestros deseos. Estas propiedades son lo suficientemente poderosas 
como para crear un modelo de caja que se transformo en lo que hoy conocemos como 
Modelo de Caja Tradicional. 

Algunas deficiencias en este modelo mantuvieron a las tablas vivas por algun tiempo, 
pero los principales desarrolladores, influenciados por el suceso de las implementaciones 
Ajax y una cantidad enorme de nuevas aplicaciones interactivas, gradualmente volvieron a 
las etiquetas <div> y estilos CSS en un estandar. Finalmente el Modelo de Caja 
Tradicional fue adoptado a gran escala. 

Plantilla 

En el Capitulo 1 construimos una plantilla HTML5. Esta plantilla tiene todos los elementos 
necesarios para proveer estructura a nuestro documento, pero algunos detalles deben ser 
agregados para aplicar los estilos CSS y el Modelo de Caja Tradicional. 

Este modelo necesita agrupar cajas juntas para ordenarlas horizontalmente. Debido a 
que el contenido completo del cuerpo es creado a partir de cajas, debemos agregar un 
elemento <div> para agruparlas, centrarlas y darles un tamano especifico. 

La nueva plantilla lucira de este modo: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<meta charset="iso-8859-l"> 

<meta name="description" content="Ejemplo de HTML5"> 
<meta name="keywords" content="HTML5, CSS3, JavaScript"> 
<title>Este texto es el titulo del documento</title> 
<link rel="stylesheet" href="misestilos.css"> 

</head> 

<body> 

<div id="agrupar"> 

<header id="cabecera"> 

<hl>Este es el titulo principal del sitio web</hl> 

</header> 
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<nav id="menu"> 

<ul > 

<li>principal</li> 

<li>fotos</li> 

<li>videos</li> 

<li>contacto</li> 

</ul> 

</nav> 

<section id="seccion"> 

<article> 

<header> 

<hgroup> 

<hl>Titulo del mensaje uno</hl> 

<h2>Subtitulo del mensaje uno</h2> 

</hgroup> 

<time datetime="2011-12-10" pubdate>publicado 10-12-2011 
</time> 

</header> 

Este es el texto de mi primer mensaje 
<figure> 

<img src="http://minkbooks.com/content/myimage.jpg"> 

<figcaption> 

Esta es la imagen del primer mensaje 
</figcaption> 

</figure> 

<footer> 

<p>comentarios (0)</p> 

</footer> 

<header> 

<hgroup> 

<hl>Titulo del mensaje dos</hl> 

<h2>Subtitulo del mensaje dos</h2> 

</hgroup> 

<time datetime="2011-12-15" pubdate>publicado 15-12-2011 
</time> 

</header> 

Este es el texto de mi segundo mensaje 
<footer> 

<p>comentarios (0)</p> 

</footer> 

</article> 

</section> 

<aside id="columna"> 

<blockquote>Mensaje numero uno</blockquote> 
<blockquote>Mensaje numero dos</blockquote> 

</aside> 

<footer id="pie"> 

Derechos Reservados &copy; 2010-2011 
</footer> 
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</div> 

</body> 

</html> 


Listado 2-25. Nueva plantilla HTML5 lista para estilos CSS. 

El Listado 2-25 provee una nueva plantilla lista para recibir los estilos CSS. Dos cambios 
importantes pueden distinguirse al comparar este codigo con el del Listado 1-18 del 
Capitulo 1. El primero es que ahora varias etiquetas fueron identificadas con los atributos 
id y class. Esto significa que podemos referenciar un elemento especifico desde las 
reglas CSS con el valor de su atributo id o podemos modificar varios elementos al mismo 
tiempo usando el valor de su atributo class. 

El segundo cambio realizado a la vieja plantilla es la adicion del elemento <div> 
mencionado anteriormente. Este <div> fue identificado con el atributo y el valor 
id="agrupar", y es cerrado al final del cuerpo con la etiqueta de cierre </div>. Este 
elemento se encarga de agrupar todos los demas elementos permitiendonos aplicar el 
modelo de caja al cuerpo y designar su posicion horizontal, como veremos mas adelante. 

Hagalo usted mismo: Compare el codigo del Listado 1-18 del Capitulo 1 con el 
codigo en el Listado 2-25 de este capitulo y ubique las etiquetas de apertura y 
cierre del elemento <div> utilizado para agrupar al resto. Tambien compruebe 
cuales elementos se encuentran ahora identificados con el atributo id y cuales con 
el atributo class. Confirme que los valores de los atributos id son unicos para 
cada etiqueta. Tambien necesitara reemplazar el codigo en el archivo HTML creado 
anteriormente por el del Listado 2-25 para aplicar los siguientes estilos CSS. 

Con el documento HTML finalizado es tiempo de trabajar en nuestro archivo de estilos. 

Selector universal * 

Comencemos con algunas reglas basicas que nos ayudaran a proveer consistencia al 
diseno: 


* { 

margin: Opx; 
padding: Opx; 

} 


Listado 2-26. Regia CSS general. 

Normalmente, para la mayoria de los elementos, necesitamos personalizar los 
margenes o simplemente mantenerlos al minimo. Algunos elementos por defecto tienen 
margenes que son diferentes de cero y en la mayoria de los casos demasiado amplios. A 
medida que avanzamos en la creacion de nuestro diseno encontraremos que la mayoria 
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de los elementos utilizados deben tener un margen de 0 pixeles. Para evitar el tener que 
repetir estilos constantemente, podemos utilizar el selector universal. 

La primera regia en nuestro archivo CSS, presentada en el Listado 2-26, nos asegura 
que todo elemento tendra un margen interno y externo de 0 pixeles. De ahora en mas 
solo necesitaremos modificar los margenes de los elementos que queremos que sean 
mayores que cero. 

Conceptos basicos: Recuerde que en HTML cada elemento es considerado como 
una caja. El margen (margin) es en realidad el espacio alrededor del elemento, el 
que se encuentra por fuera del borde de esa caja (el estilo padding, por otro 
lado, es el espacio alrededor del contenido del elemento pero dentro de sus 
bordes, como el espacio entre el titulo y el borde de la caja virtual formada por el 
elemento <hi> que contiene ese titulo). El tamano del margen puede ser 
definido por lados especificos del elemento o todos sus lados a la vez. El estilo 
margin: Opx en nuestro ejemplo establece un margen 0 o nulo para cada 
elemento de la caja. Si el tamano hubiese sido especificado en 5 pixeles, por 
ejemplo, la caja tendria un espacio de 5 pixeles de ancho en todo su contorno. 
Esto significa que la caja estaria separada de sus vecinas por 5 pixeles. 
Volveremos sobre este tema mas adelante en este capitulo. 

Hagalo usted mismo: Debemos escribir todas las reglas necesarias para otorgar 
estilo a nuestra plantilla en un archivo CSS. El archivo ya fue incluido dentro del 
codigo HTML por medio de la etiqueta <link>, por lo que lo unico que tenemos 
que hacer es crear un archivo de texto vacio con nuestro editor de textos 
preferido, grabarlo con el nombre misestilos. css y luego copiar en su interior 
la regia del Listado 2-26 y todas las presentadas a continuacion. 

Nueva jerarqui'a para cabeceras 

En nuestra plantilla usamos elementos <hi> y <h2> para declarar titulos y subtitulos de 
diferentes secciones del documento. Los estilos por defecto de estos elementos se 
encuentran siempre muy lejos de lo que queremos y ademas en HTML5 podemos 
reconstruir la jerarquia H varias veces en cada seccion (como aprendimos en el capitulo 
anterior). El elemento <hi>, por ejemplo, sera usado varias veces en el documento, no 
solo para el titulo principal de la pagina web como pasaba anteriormente sino tambien 
para secciones internas, por lo que tenemos que otorgarle los estilos apropiados: 


hi { 

font: bold 20px verdana, sans-serif; 

} 

h2 { 

font: bold 14px verdana, sans-serif; 

} 


Listado 2-27. Agregando estilos para los elementos <hl> y <h2>. 
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La propiedad font, asignada a los elementos <hi> y <h 2 > en el Listado 2-27, nos 
permite declarar todos los estilos para el texto en una sola linea. Las propiedades que 
pueden ser declaradas usando font son: font-style, font-variant, font-weight, 
font-size/line-height, y font-family en este orden. Con estas reglas estamos 
cambiando el grosor, tamano y tipo de letra del texto dentro de los elementos <hi> y 
<h 2 > a los valores que deseamos. 

Declarando nuevos elementos HTML5 

Otra regia basica que debemos declarar desde el comienzo es la definicion por defecto de 
elementos estructurales de HTML5. Algunos navegadores aun no reconocen estos elementos o 
los tratan como elementos inline (en linea). Necesitamos declarar los nuevos elementos 
HTML5 como elementos block para asegurarnos de que seran tratados como regularmente se 
hace con elementos <div> y de este modo construir nuestro modelo de caja: 


header, section, footer, aside, nav, article, figure, figcaption, 
hgroup{ 

display: block; 

} 


Listado 2-28. Regia por defecto para elementos estructurales de HTML5. 

A partir de ahora, los elementos afectados por la regia del Listado 2-28 seran 
posicionados uno sobre otro a menos que especifiquemos algo diferente mas adelante. 

Centrando el cuerpo 

El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por 
diferentes razones de diseno, el contenido de este elemento debe ser posicionado 
horizontalmente. Siempre deberemos especificar el tamano de este contenido, o un tamano 
maximo, para obtener un diseno consistente a traves de diferentes configuraciones de 
pantalla. 


text-align: center; 

} 


Listado 2-29. Centrando el cuerpo. 

Por defecto, la etiqueta <body> (como cualquier otro elemento block) tiene un valor 
de ancho establecido en 100%. Esto significa que el cuerpo ocupara el ancho completo de 
la ventana del navegador. Por lo tanto, para centrar la pagina en la pantalla necesitamos 
centrar el contenido dentro del cuerpo. Con la regia agregada en el Listado 2-29, todo lo 
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que se encuentra dentro de <body> sera centrado en la ventana, centrando de este modo 
toda la pagina web. 

Creando la caja principal 

Siguiendo con el diseno de nuestra plantilla, debemos especificar una tamano o tamano 
maximo para el contenido del cuerpo. Como seguramente recuerda, en el Listado 2-25 en este 
mismo capitulo agregamos un elemento <div> a la plantilla para agrupar todas las cajas 
dentro del cuerpo. Este <div> sera considerado la caja principal para la construction de 
nuestro modelo de caja (este es el proposito por el que lo agregamos). De este modo, 
modificando el tamano de este elemento lo hacemos al mismo tiempo para todos los demas: 


#agrupar { 

width: 960px; 
margin: 15px auto; 
text-align: left; 

} 


Listado 2-30. Definiendo las propiedades de la caja principal. 

La regia en el Listado 2-30 esta referenciando por primera vez un elemento a traves del 
valor de su atributo id. El caracter # le esta diciendo al navegador que el elemento 
afectado por este conjunto de estilos tiene el atributo id con el valor agrupar. 

Esta regia provee tres estilos para la caja principal. El primer estilo establece un valor 
fijo de 960 pixeles. Esta caja tendra siempre un ancho de 960 pixeles, lo que representa un 
valor comun para un sitio web estos dias (los valores se encuentran entre 960 y 980 
pixeles de ancho, sin embargo estos parametros cambian constantemente a traves del 
tiempo, por supuesto). 

El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. En la 
regia previa (Listado 2-29), especificamos que el contenido del cuerpo seria centrado 
horizontalmente con el estilo text-align: center. Pero esto solo afecta contenido 
inline, como textos o imagenes. Para elementos block, como un <div>, necesitamos 
establecer un valor espetifico para sus margenes que los adapta automaticamente al 
tamano de su elemento padre. La propiedad margin usada para este proposito puede 
tener cuatro valores: superior, derecho, inferior, izquierdo, en este orden. Esto significa 
que el primer valor declarado en el estilo representa el margen de la parte superior del 
elemento, el segundo es el margen de la derecha, y asi sucesivamente. Sin embargo, si 
solo escribimos los primeros dos parametros, el resto tomara los mismos valores. En 
nuestro ejemplo estamos usando esta tecnica. 

En el Listado 2-30, el estilo margin: I5px auto asigna 15 pixeles al margen superior 
e inferior del elemento <div> que esta afectando y declara como automatico el tamano 
de los margenes de izquierda y derecha (los dos valores declarados son usados para 
definir los cuatro margenes). De esta manera, habremos generado un espacio de 15 
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pixeles en la parte superior e inferior del cuerpo y los espacios a los laterales (margen 
izquierdo y derecho) seran calculados automaticamente de acuerdo al tamano del cuerpo 
del documento y el elemento <div>, efectivamente centrando el contenido en pantalla. 

La pagina web ya esta centrada y tiene un tamano fijo de 960 pixeles. Lo proximo que 
necesitamos hacer es prevenir un problema que ocurre en algunos navegadores. La 
propiedad text-aiign es hereditaria. Esto significa que todos los elementos dentro del 
cuerpo y su contenido seran centrados, no solo la caja principal. El estilo asignado a <body> 
en el Listado 2-29 sera asignado a cada uno de sus hijos. Debemos retornar este estilo a su 
valor por defecto para el resto del documento. El tercer y ultimo estilo incorporado en la 
regia del Listado 2-30 (text-align: left) logra este proposito. El resultado final es que el 
contenido del cuerpo es centrado pero el contenido de la caja principal (el <div> 
identificado como agrupar) es alineado nuevamente hacia la izquierda, por lo tanto todo el 
resto del codigo HTML dentro de esta caja hereda este estilo. 

Hagalo usted mismo: Si aun no lo ha hecho, copie cada una de las reglas listadas 
hasta este punto dentro de un archivo de texto vacio llarnadomisestiios.css. 
Este archivo debe estar ubicado en el mismo directorio (carpeta) que el archivo 
HTML con el codigo del Listado 2-25. Al terminar, debera contar con dos archivos, 
uno con el codigo HTML y otro llamado misestilos.css con todos los estilos 
CSS estudiados desde el Listado 2-26. Abra el archivo HTML en su navegador y en 
la pantalla podra notar la caja creada. 

La cabecera 

Continuemos con el resto de los elementos estructurales. Siguiendo la etiqueta de 
apertura del <div> principal se encuentra el primer elemento estructural de HTML5: 
<header>. Este elemento contiene el titulo principal de nuestra pagina web y estara 
ubicado en la parte superior de la pantalla. En nuestra plantilla, <header> fue 
identificado con el atributo id y el valor cabecera. 

Como ya mencionamos, cada elemento block, asf como el cuerpo, por defecto tiene un 
valor de ancho del 100%. Esto significa que el elemento ocupara todo el espacio horizontal 
disponible. En el caso del cuerpo, ese espacio es el ancho total de la pantalla visible (la 
ventana del navegador), pero en el resto de los elementos el espacio maximo disponible 
estara determinado por el ancho de su elemento padre. En nuestro ejemplo, el espacio 
maximo disponible para los elementos dentro de la caja principal sera de 960 pixeles, 
porque su padre es la caja principal la cual fue previamente configurada con este tamano. 


#cabecera { 

background: #FFFBB9; 
border: lpx solid #999999; 
padding: 2 0px; 

} 


Listado 2-31. Agregando estilos para <header>. 
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Debido a que <header> ocupara todo el espacio horizontal disponible en la caja 
principal y sera tratado como un elemento block (y por esto posicionada en la parte 
superior de la pagina), lo unico que resta por hacer es asignar estilos que nos permitiran 
reconocer el elemento cuando es presentado en pantalla. En la regia mostrada en el 
Listado 2-31 le otorgamos a <header> un fondo amarillo, un borde solido de 1 pixel y un 
margen interior de 20 pixeles usando la propiedad padding. 

Barra de navegacion 

Siguiendo al elemento <header> se encuentra el elemento <nav>, el cual tiene el 
proposito de proporcionar ayuda para la navegacion. Los enlaces agrupados dentro de 
este elemento representaran el menu de nuestro sitio web. Este menu sera una simple 
barra ubicada debajo de la cabecera. Por este motivo, del mismo modo que el elemento 
<header>, la mayoria de los estilos que necesitamos para posicionar el elemento <nav> 
ya fueron asignados: <nav> es un elemento block por lo que sera ubicado debajo del 
elemento previo, su ancho por defecto sera 100% por lo que sera tan ancho como su 
padre (el <div> principal), y (tambien por defecto) sera tan alto como su contenido y los 
margenes predeterminados. Por lo tanto, lo unico que nos queda por hacer es mejorar su 
aspecto en pantalla. Esto ultimo lo logramos agregando un fondo gris y un pequeno 
margen interno para separar las opciones del menu del borde del elemento: 


#menu { 

background: #CCCCCC; 
padding: 5px 15px; 

} 

#menu li { 

display: inline-block; 
list-style: none; 
padding: 5px; 

font: bold 14px verdana, sans-serif; 

} 


Listado 2-32. Agregando estilos para <nav>. 

En el Listado 2-32, la primera regia referencia al elemento <nav> por su atributo id, cambia 
su color de fondo y agrega margenes internos de 5px y 15px con la propiedad padding. 

Conceptos basicos: La propiedad padding trabaja exactamente como margin. 
Cuatro valores pueden ser especificados: superior, derecho, inferior, izquierdo, 
en este orden. Si solo declaramos un valor, el mismo sera asignado para todos los 
espacios alrededor del contenido del elemento. Si en cambio especificamos dos 
valores, entonces el primero sera asignado como margen interno de la parte 
superior e inferior del contenido y el segundo valor sera asignado al margen 
interno de los lados, izquierdo y derecho. 
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Dentro de la barra de navegacion hay una lista creada con las etiquetas <ul> y <li>. Por 
defecto, los Items de una lista son posicionados unos sobre otros. Para cambiar este 
comportamiento y colocar cada opcion del menu una al lado de la otra, referenciamos los 
elementos <li> dentro de este elemento <nav> en particular usando el selector #menu 
li, y luego asignamos a todos ellos el estilo display: inline-block para convertirlos en 
lo que se llama cajas inline. A diferencia de los elementos block, los elementos afectados por 
el parametro inline-block estandarizado en CSS3 no generan ningun salto de linea pero 
nos permiten tratarlos como elementos block y asi declarar un valor de ancho determinado. 
Este parametro tambien ajusta el tamano del elemento de acuerdo con su contenido cuando 
el valor del ancho no fue especificado. 

En esta ultima regia tambien eliminamos el pequeno grafico generado por defecto por 
los navegadores delante de cada opcion del listado utilizando la propiedad list-style. 

Section y aside 

Los siguientes elementos estructurales en nuestro codigo son dos cajas ordenadas 
horizontalmente. El Modelo de Caja Tradicional es construido sobre estilos CSS que nos 
permiten especificar la posicion de cada caja. Usando la propiedad float podemos 
posicionar estas cajas del lado izquierdo o derecho de acuerdo a nuestras necesidades. Los 
elementos que utilizamos en nuestra plantilla HTML para crear estas cajas son <section> 
y <aside>, cada uno identificado con el atributo id y los valores seccion y columna 
respectivamente. 


ttseccion { 
float: left; 
width: 660px; 
margin: 2 0px; 

} 

ttcolumna { 
float: left; 
width: 220px; 
margin: 20px Opx; 
padding: 2 0px; 
background: ttCCCCCC; 

} 


Listado 2-33. Creando dos columnas con la propiedad float. 

La propiedad de CSS float es una de las propiedades mas ampliamente utilizadas 
para aplicar el Modelo de Caja Tradicional. Hace que el elemento flote hacia un lado o al 
otro en el espacio disponible. Los elementos afectados por float actuan como elementos 
block (con la diferencia de que son ubicados de acuerdo al valor de esta propiedad y no el 
flujo normal del documento). Los elementos son movidos a izquierda o derecha en el area 
disponible, tanto como sea posible, respondiendo al valor de float. 
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Con las reglas del Listado 2-33 declaramos la posicion de ambas cajas y sus respectivos 
tamanos, generando as! las columnas visibles en la pantalla. La propiedad float mueve la 
caja al espacio disponible del lado especificado por su valor, width asigna un tamano 
horizontal y margin, porsupuesto, declara el margen del elemento. 

Afectado por estos valores, el contenido del elemento <section> estara situado a la 
izquierda de la pantalla con un tamano de 660 pixeles, mas 40 pixeles de margen, 
ocupando un espacio total de 700 pixeles de ancho. 

La propiedad float del elemento <aside> tambien tiene el valor left (izquierda). 
Esto significa que la caja generada sera movida al espacio disponible a su izquierda. 
Debido a que la caja previa creada por el elemento <section> fue tambien movida a la 
izquierda de la pantalla, ahora el espacio disponible sera solo el que esta caja dejo libre. La 
nueva caja quedara ubicada en la misma linea que la primera pero a su derecha, ocupando 
el espacio restante en la linea, creando la segunda columna de nuestro diseno. 

El tamano declarado para esta segunda caja fue de 220 pixeles. Tambien agregamos 
un fondo gris y configuramos un margen interno de 20 pixeles. Como resultado final, el 
ancho de esta caja sera de 220 pixeles mas 40 pixeles agregados por la propiedad 
padding (los margenes de los lados fueron declarados a Opx). 

Conceptos basicos: El tamano de un elemento y sus margenes son agregados para 
obtener el valor real ocupado en pantalla. Si tenemos un elemento de 200 pixeles 
de ancho y un margen de 10 pixeles a cada lado, el area real ocupada por el 
elemento sera de 220 pixeles. El total de 20 pixeles del margen es agregado a los 
200 pixeles del elemento y el valor final es representado en la pantalla. Lo mismo 
pasa con las propiedades padding y border. Cada vez que agregamos un borde a 
un elemento o creamos un espacio entre el contenido y el borde usando padding 
esos valores seran agregados al ancho del elemento para obtener el valor real 
cuando el elemento es mostrado en pantalla. Este valor real es calculado con la 
formula: tamano + margenes + margenes internos + bordes. 

Hagalo usted mismo: Lea el codigo del Listado 2-25. Controle cada regia CSS creada 
hasta el momento y busque en la plantilla los elementos HTML correspondientes a 
cada una de ellas. Siga las referencias, por ejemplo las claves de los elementos 
(como hi) y los atributos id (como cabecera), para entender como trabajan las 
referencias y como los estilos son asignados a cada elemento. 


Footer 

Para finalizar la aplicacion del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser 
aplicada al elemento <footer>. Esta propiedad devuelve al documento su flujo normal y nos 
permite posicionar <footer> debajo del ultimo elemento en lugar de a su lado: 


#pie { 

clear: both; 
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text-align: center; 
padding: 20px; 

border-top: 2px solid #999999; 


Listado 2-34. Otorgando estilos a <footer> y recuperando el normal flujo del documento. 

La regia del Listado 2-34 declara un borde de 2 pixeles en la parte superior de 
<footer>, un margen interno (padding) de 20 pixeles, y centra el texto dentro del 
elemento. A sf mismo, restaura el normal flujo del documento con la propiedad clear. 
Esta propiedad simplemente restaura las condiciones normales del area ocupada por el 
elemento, no permitiendole posicionarse adyacente a una caja flotante. El valor 
usualmente utilizado es both, el cual significa que ambos lados del elemento seran 
restaurados y el elemento seguira el flujo normal (este elemento ya no es flotante como 
los anteriores). Esto, para un elemento block, quiere decir que sera posicionado debajo del 
ultimo elemento, en una nueva linea. 

La propiedad clear tambien empuja los elementos verticalmente, haciendo que las 
cajas flotantes ocupen un area real en la pantalla. Sin esta propiedad, el navegador 
presenta el documento en pantalla como si los elementos flotantes no existieran y las 
cajas se superponen. 


display: block 
display: block 


display: block 

display: block 

float: left 

float: left 

display: block 


clear: both 



Figura 2-2. Representacion visual del modelo de caja tradicional. 
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Cuando tenemos cajas posicionadas una al lado de la otra en el Modelo de Caja 
Tradicional siempre necesitamos crear un elemento con el estilo clear: both para 
poder seguir agregando otras cajas debajo de un modo natural. La Figura 2-2 muestra una 
representacion visual de este modelo con los estilos basicos para lograr la correcta 
disposicion en pantalla. 

Los valores left (izquierda) y right (derecha) de la propiedad float no significan 
que las cajas deben estar necesariamente posicionadas del lado izquierdo o derecho de la 
ventana. Lo que los valores hacen es volver flotante ese lado del elemento, rompiendo el 
flujo normal del documento. Si el valor es left, por ejemplo, el navegador tratara de 
posicionar el elemento del lado izquierdo en el espacio disponible. Si hay espacio 
disponible luego de otro elemento, este nuevo elemento sera situado a su derecha, 
porque su lado izquierdo fue configurado como flotante. El elemento flota hacia la 
izquierda hasta que encuentra algo que lo bloquea, como otro elemento o el borde de su 
elemento padre. Esto es importante cuando queremos crear varias columnas en la 
pantalla. En este caso cada columna tendra el valor left en la propiedad float para 
asegurar que cada columna estara continua a la otra en el orden correcto. De este modo, 
cada columna flotara hacia la izquierda hasta que es bloqueada por otra columna o el 
borde del elemento padre. 

Ultimos toques 

Lo unico que nos queda por hacer es trabajar en el diseno del contenido. Para esto, solo 
necesitamos configurar los pocos elementos HTML5 restantes: 


background: #FFFBCC; 
border: lpx solid #999999; 
padding: 2 0px; 
margin-bottom: 15px; 

} 

article footer { 
text-align: right; 

} 

time { 

color: #999999; 

} 

figcaption { 

font: italic 14px verdana, sans-serif; 

} 


Listado 2-35. Agregando los ultimos toques a nuestro diseno basico. 

La primera regia del Listado 2-35 referenda todos los elementos <article> y les 
otorga algunos estilos basicos (color de fondo, un borde solido de 1 pixel, margen interno 
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y margen inferior). El margen inferior de 15 pixeles tiene el proposito de separar un 
elemento <article> del siguiente verticalmente. 

Cada elemento <article> cuenta tambien con un elemento <footer> que muestra 
el numero de comentarios recibidos. Para referenciar un elemento <footer> dentro de 
un elemento <article>, usamos el selector article footer que significa "cada 
<footer> dentro de un <article> sera afectado por los siguientes estilos". Esta tecnica 
de referencia fue aplicada aqui para alinear a la derecha el texto dentro de los elementos 
<footer> de cada <article>. 

Al final del codigo en el Listado 2-35 cambiamos el color de cada elemento <time> y 
diferenciamos la descripcion de la imagen (insertada con el elemento <figcaption>) del 
resto del texto usando una tipo de letra diferente. 

Hagalo usted mismo: Si aun no lo ha hecho, copie cada regia CSS listada en este 
capitulo desde el Listado 2-26, una debajo de otra, dentro del archivo 
misestilos.css, y luego abra el archivo HTML con la plantilla creada en el 
Listado 2-25 en su navegador. Esto le mostrara como funciona el Modelo de Caja 
Tradicional y como los elementos estructurales son organizados en pantalla. 

IMPORTANTE: Puede acceder a estos codigos con un solo clic desde nuestro sitio 
web. Visite www.minkbooks.com. 

Box-sizing 

Existe una propiedad adicional incorporada en CSS3 relacionada con la estructura y el 
Modelo de Caja Tradicional. La propiedad box-sizing nos permite cambiar como el 
espacio total ocupado por un elemento en pantalla sera calculado forzando a los 
navegadores a incluir en el ancho original los valores de las propiedades padding y 
border. 

Como explicamos anteriormente, cada vez que el area total ocupada por un elemento 
es calculada, el navegador obtiene el valor final por medio de la siguiente formula: 
tamano + margenes + margenes internos + bordes. 

Por este motivo, si declaramos la propiedad width igual a 100 pixeles, margin en 20 
pixeles, padding en 10 pixeles y border en 1 pixel, el area horizontal total ocupada por el 
elemento sera: 100+40+20+2= 162 pixeles (note que tuvimos que duplicar los valores de 
margin, padding y border en la formula porque consideramos que los mismos fueron 
asignados tanto para el lado derecho como el izquierdo). 

Esto significa que cada vez que declare el ancho de un elemento con la propiedad 
width, debera recordar que el area real para ubicar el elemento en pantalla sera 
seguramente mas grande. 

Dependiendo de sus costumbres, a veces podrfa resultar util forzar al navegador a 
incluir los valores de padding y border en el tamano del elemento. En este caso la nueva 
formula serfa simplemente: tamano + margenes. 
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div { 

width: lOOpx; 
margin: 2 0px; 
padding: lOpx; 
border: lpx solid #000000; 

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


Listado 2-36. Incluyendo padding y border en el tamano del elemento. 

La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como 
content-box, lo que significa que los navegadores agregaran los valores de padding y 
border al tamano especificado por width y height. Usando el valor border-box en su 
lugar, este comportamiento es cambiado de modo que padding y border son incluidos 
dentro del elemento. 

El Listado 2-36 muestra la aplicacion de esta propiedad en un elemento <div>. Este es 
solo un ejemplo y no vamos a usarlo en nuestra plantilla, pero puede ser util para algunos 
disenadores dependiendo de que tan familiarizados se encuentran con los metodos 
tradicionales propuestos por versiones previas de CSS. 

IMPORTANTE: En este momento, la propiedad box-sizing, al igual que otras 
importantes propiedades CSS3 estudiadas en proximos capitulos, se encuentra en 
estado experimental en algunos navegadores. Para aplicarla efectivamente a sus 
documentos, debe declararla con los correspondientes prefijos, como hicimos en 
el Listado 2-36. Los prefijos para los navegadores mas comunes son los 
siguientes: 


• -moz- para Firefox. 

• -webkit- para Safari y Chrome. 

• -o- para Opera. 

• -khtml- para Konqueror. 

• -ms- para Internet Explorer. 

• -chrome- espedfico para Google Chrome. 


2.6 Referencia rapida 

En HTML5 la responsabilidad por la presentacion de la estructura en pantalla esta mas que 
nunca en manos de CSS. Incorporaciones y mejoras se han hecho en la ultima version de 
CSS para proveer mejores formas de organizar documentos y trabajar con sus elementos. 
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Selector de atributo y pseudo clases 

CSS3 incorpora nuevos mecanismos para referenciar elementos HTML 

Selector de Atributo Ahora podemos utilizar otros atributos ademas de id y class para 
encontrar elementos en el documento y asignar estilos. Con la construccion 
palabraclave [atributo=valor] , podemos referenciar un elemento que tiene un 
atributo particular con un valor especifico. Por ejemplo, p [name="texto"] 
referenciara cada elemento <p> con un atributo llamado name y el valor "texto". 
CSS3 tambien provee tecnicas para hacer esta referenda aun mas especlfica. Usando 
las siguientes combinaciones de slmbolos A =, $= y *= podemos encontrar elementos 
que comienzan con el valor provisto, elementos que terminan con ese valor y 
elementos que tienen el texto provisto en alguna parte del valor del atributo. Por 
ejemplo, p [name A ="texto"l sera usado para encontrar elementos <p> que tienen 
un atributo llamado name con un valor que comienza por "texto". 

Pseudo Clase :nth-child() Esta pseudo clase encuentra un hijo especifico siguiendo la 
estructura de arbol de HTML. Por ejemplo, con el estilo span:nth-child(2) 
estamos referenciando el elemento <span> que tiene otros elementos <span> como 
hermanos y esta localizado en la posicion 2. Este numero es considerado el Indice. En 
lugar de un numero podemos usar las palabras clave odd y even para referenciar 
elementos con un Indice impar o par respectivamente (por ejemplo, spantnth- 
child (odd)). 

Pseudo Clase :first-child Esta pseudo clase es usada para referenciar el primer hijo, similar 
a :nth-child(l). 

Pseudo Clase :last-child Esta pseudo clase es usada para referenciar el ultimo hijo. 

Pseudo Clase :only-child Esta pseudo clase es usada para referenciar un elemento que es 
el unico hijo disponible de un mismo elemento padre. 

Pseudo Clase :not() Esta pseudo clase es usada para referenciar todo elemento excepto el 
declarado entre parentesis. 

Selectores 

CSS3 tambien incorpora nuevos selectores que ayudan a llegar a elementos diflciles de 

referenciar utilizando otras tecnicas. 

Selector > Este selector referenda al elemento de la derecha cuando tiene el elemento de 
la izquierda como padre. Por ejemplo, div > p referenciara cada elemento <p> que 
es hijo de un elemento <div>. 

Selector + Este selector referencia elementos que son hermanos. La referenda apuntara al 
elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. 
Por ejemplo, span + p afectara a los elementos <p> que son hermanos y estan 
ubicados luego de un elemento <span>. 
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Selector ~ Este selector es similar al anterior, pero en este caso el elemento de la derecha 
no tiene que estar ubicado inmediatamente despues del de la izquierda. 
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Capitulo 3 

Propiedades CSS3 


3.1 Las nuevas reglas 

La web cambio para siempre cuando unos anos atras nuevas aplicaciones desarrolladas 
sobre implementaciones Ajax mejoraron el diseno y la experiencia de los usuarios. La 
version 2.0, asignada a la web para describir un nuevo nivel de desarrollo, represento un 
cambio no solo en la forma en que la information era transmitida sino tambien en como 
los sitios web y nuevas aplicaciones eran disenados y construidos. 

Los codigos implementados en esta nueva generation de sitios web pronto se 
volvieron estandar. La innovacion se volvio tan importante para el exito de cualquier 
proyecto en Internet que programadores desarrollaron librerias completas para superar 
las limitaciones y satisfacer los nuevos requerimientos de los disenadores. 

La falta de soporte por parte de los navegadores era evidente, pero la organization 
responsable de los estandares web no tomo las tendencias muy seriamente e intento 
seguir su propio camino. Afortunadamente, algunas mentes brillantes siguieron 
desarrollando nuevos estandares en paralelo y pronto HTML5 nacio. Luego del retorno de 
la calma (y algunos acuerdos de por medio), la integration entre HTML, CSS y Javascript 
bajo la tutela de HTML5 fue como el caballero bravo y victorioso que dirige las tropas 
hacia el palacio enemigo. 

A pesar de la reciente agitacion, esta batalla comenzo mucho tiempo atras, con la 
primera especificacion de la tercera version de CSS. Cuando finalmente, alrededor del ano 
2005, esta tecnologfa fue oficialmente considerada estandar, CSS estaba listo para proveer 
las funciones requeridas por desarrolladores (aquellas que programadores habian creado 
desde anos atras usando codigos Javascript complicados de implementar y no siempre 
compatibles). 

En este capitulo vamos a estudiar las contribuciones hechas por CSS3 a HTML5 y todas 
las propiedades que simplifican la vida de disenadores y programadores. 

CSS3 se vuelve loco 

CSS fue siempre sobre estilo, pero ya no mas. En un intento por reducir el uso de codigo 
Javascript y para estandarizar funciones populares, CSS3 no solo cubre diseno y estilos 
web sino tambien forma y movimiento. La especificacion de CSS3 es presentada en 
modulos que permiten a la tecnologfa proveer una especificacion estandar por cada 
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aspecto involucrado en la presentacion visual del documento. Desde esquinas 
redondeadas y sombras hasta transformaciones y reposicionamiento de los elementos ya 
presentados en pantalla, cada posible efecto aplicado previamente utilizando Javascript 
fue cubierto. Este nivel de cambio convierte CSS3 en una tecnologia practicamente inedita 
comparada con versiones anteriores. 

Cuando la especificacion de HTML5 fue escrita considerando CSS a cargo del diseno, la 
mitad de la batalla contra el resto de las especificaciones propuesta habfa sido ganada. 

Plantilla 

Las nuevas propiedades CSS3 son extremadamente poderosas y deben ser estudiadas una 
por una, pero para facilitar su aprendizaje vamos a aplicar todas ellas sobre la misma 
plantilla. Por este motivo comenzaremos por crear un documento HTML sencillo con 
algunos estilos basicos: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Nuevos Estilos CSS3</title> 

<link rel="stylesheet" href="nuevocss3.css"> 
</head> 

<body> 

<header id="principal"> 

<span id="titulo">Estilos CSS Web 2.0</span> 
</header> 

</body> 

</html> 


Listado 3-1. Una plantilla simple para probar nuevas propiedades. 

Nuestro documento solo tiene una seccion con un texto breve en su interior. El 
elemento <header> usado en la plantilla podria ser reemplazado por <div>, <nav>, 
<section> o cualquier otro elemento estructural de acuerdo a la ubicacion en el diseno y 
a su funcion. Luego de aplicar los estilos, la caja generada con el codigo del ejemplo del 
Listado 3-1 lucira como una cabecera, por consiguiente decidimos usar <header> en este 
caso. 

Debido a que el elemento <font> se encuentra en desuso en HTML5, los elementos 
usados para mostrar texto son normalmente <span> para lineas cortas y <p> para 
parrafos, entre otros. Por esta razon el texto en nuestra plantilla fue insertado usando 
etiquetas <span>. 

Hagalo usted mismo: Use el codigo provisto en el Listado 3-1 como la plantilla para 
este capitulo. Necesitara ademas crear un nuevo archivo CSS llamado 
nuevocss3. css para almacenar los estilos estudiados de aqui en adelante. 
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Los siguientes son los estilos basicos requeridos por nuestro documento HTML: 


body { 

text-align: center; 

} 

ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

} 

tttitulo { 

font: bold 36px verdana, sans-serif; 

} 


Listado 3-2. Reglas basicas CSS con las que comenzar. 

No hay nada nuevo en las reglas del Listado 3-2, solo los estilos necesarios para dar 
forma a la plantilla y crear una caja ancha, posicionada en el centra de la ventana, con un 
fondo gris, un borde y un texto grande en su interior que dice "Estilos CSS Web 2.0". 

Una de las cosas que notara sobre esta caja cuando sea mostrada en pantalla es que 
sus esquinas son rectas. Esto no es algo que nos agrade, iverdad? Puede ser un factor 
psicologico o no, lo cierto es que a casi nadie en este negocio le agradan las esquinas 
rectas. Por lo tanto, lo primero que haremos sera cambiar este aspecto. 

Border-radius 

Por muchos anos disenadores han sufrido intentando lograr el efecto de esquinas 
redondeadas en las cajas de sus paginas web. El proceso era casi siempre frustrante y 
extenuante. Todos lo padecieron alguna vez. Si mira cualquier presentacion en video de 
las nuevas caracteristicas incorporadas en HTML5, cada vez que alguien habla sobre las 
propiedades de CSS3 que hacen posible generar facilmente esquinas redondeadas, la 
audiencia enloquece. Esquinas redondeadas eran esa clase de cosas que nos hacfan 
pensar: "deberia ser facil hacerlo". Sin embargo nunca lo fue. 

Esta es la razon por la que, entre todas las nuevas posibilidades e increibles 
propiedades incorporadas en CSS3, la que exploraremos en primera instancia es border- 
radius: 


body { 

text-align: center; 

} 
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#principal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 

} 

tttitulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-3. Generando esquinas redondeadas. 

La propiedad border-radius en este momento es experimental por lo que debemos 
usar los prefijos -moz- y -webkit- para que funcionen en navegadores basados en 
motores Gecko y WebKit, como Firefox, Safari y Google Chrome (los prefijos fueron 
estudiados y aplicados en el Capftulo 2). Si todas las esquinas tienen la misma curvatura 
podemos utilizar un solo valor. Sin embargo, como ocurre con las propiedades margin y 
padding, podemos tambien declarar un valor diferente por cada una: 


body { 

text-align: center; 

} 

ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px lOpx 30px 50px; 
-webkit-border-radius: 20px lOpx 30px 50px; 
border-radius: 20px lOpx 30px 50px; 

} 

tttitulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-4. Diferentes valores para cada esquina. 
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Como puede ver en el Listado 3-4, los cuatro valores asignados a la propiedad 
border-radius representan diferentes ubicaciones. Recorriendo la caja en direccion de 
las agujas del reloj, los valores se aplicaran en el siguiente orden: esquina superior 
izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda. 
Los valores son siempre dados en direccion de las agujas del reloj, comenzando por la 
esquina superior izquierda. 

Al igual que con margin o padding, border-radius puede tambien trabajar solo 
con dos valores. El primer valor sera asignado a la primera y tercera equina (superior 
izquierda, inferior derecha), y el segundo valor a la segunda y cuarta esquina (superior 
derecha, inferior izquierda). 

Tambien podemos dar forma a las esquinas declarando un segundo grupo de valores 
separados por una barra. Los valores a la izquierda de la barra representaran el radio 
horizontal mientras que los valores a la derecha representan el radio vertical. La 
combinacion de estos valores genera una elipsis: 


text-align: center; 

} 

#principal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px / lOpx; 
-webkit-border-radius: 20px / lOpx; 
border-radius: 20px / lOpx; 

} 

fttitulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-5. Esquinas eiipticas. 

Hagalo usted mismo: Copie dentro del archivo CSS llamado nuevocss3.css los 
estilos que quiera probar y abra el archivo HTML generado con el Listado 3-1 en 
su navegador para comprobar los resultados. 

Box-shadow 

Ahora que finalmente contamos con la posibilidad de generar bonitas esquinas para 
nuestras cajas podemos arriesgarnos con algo mas. Otro muy buen efecto, que habia sido 
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extremadamente complicado de lograr hasta este momenta, es sombras. Por anos 
disenadores han combinado imagenes, elementos y algunas propiedades CSS para generar 
sombras. Gracias a CSS3 y a la nueva propiedad box-shadow podremos aplicar sombras a 
nuestras cajas con solo una simple linea de codigo: 


body { 

text-align: center; 

} 

ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px; 
box-shadow: rgb(150,150,150) 5px 5px; 

} 

fttitulo { 

font: bold 36px verdana, sans-serif; 


Listado 3-6. Aplicando sombra a nuestra caja. 

La propiedad box-shadow necesita al menos tres valores. El primero, que puede ver 
en la regia del Listado 3-6, es el color. Este valor fue construido aquf utilizando la funcion 
rgb () y numeros decimales, pero podemos escribirlo en numeros hexadecimales 
tambien, como hicimos previamente para otros parametros en este libro. 

Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la 
sombra. Este desplazamiento puede ser positivo o negativo. Los valores indican, 
respectivamente, la distancia horizontal y vertical desde la sombra al elemento. Valores 
negativos posicionaran la sombra a la izquierda y arriba del elemento, mientras que 
valores positivos crearan la sombra a la derecha y debajo del elemento. Valores de 0 o 
nulos posicionaran la sombra exactamente detras del elemento, permitiendo la 
posibilidad de crear un efecto difuminado a todo su alrededor. 


Hagalo usted mismo: Para probar los diferentes parametros y posibilidades con los 
que contamos para asignar una sombra a una caja, copie el codigo del Listado 3-6 
dentro del archivo CSS y abra el archivo HTML con la plantilla del Listado 3-1 en su 
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navegador. Puede experimentar cambiando los valores de la propiedad box-shadow 
y puede usar el mismo codigo para experimentar tambien con los nuevos parametros 
estudiados a continuacion. 

La sombra que obtuvimos hasta el momento es solida, sin gradientes o transparencias 
(no realmente como una sombra suele aparecer). Existen algunos parametros mas y 
cambios que podemos implementar para mejorar la apariencia de la sombra. 

Un cuarto valor que se puede agregar a la propiedad ya estudiada es la distancia de 
difuminacion. Con este efecto ahora la sombra lucira real. Puede intentar utilizar este 
nuevo parametro declarando un valor de 10 pixeles a la regia del Listado 3-6, como en el 
siguiente ejemplo: 


box-shadow: rgb(150,150,150) 5px 5px lOpx; 


Listado 3-7. Agregando el valor de difuminacion a box-shadow. 

Agregando otro valor mas en pixeles al final de la propiedad desparramara la sombra. 
Este efecto cambia un poco la naturaleza de la sombra expandiendo el area que cubre. A 
pesar de que no recomendamos utilizar este efecto, puede ser aplicable en algunos 
disenos. 


Hagalo usted mismo: Intente agregar un valor de 20 pixeles al final del estilo del 
Listado 3-7 y combine este codigo con el codigo del Listado 3-6 para probarlo. 

IMPORTANTE: Siempre recuerde que en este momento las propiedades estudiadas 
son experimentales. Para usarlas, debe declarar cada una agregando los prefijos 
correspondientes, como -moz- o -webkit-, de acuerdo al navegador que usa (en 
este ejemplo, Firefox o Google Chrome). 

El ultimo valor posible para box-shadow no es un numero sino mas bien una palabra 
clave: inset. Esta palabra clave convierte a la sombra externa en una sombra interna, lo 
cual provee un efecto de profundidad al elemento afectado. 


box-shadow: rgb(150,150,150) 5px 5px lOpx inset; 

Listado 3-8. Sombra interna. 

El estilo en el Listado 3-8 mostrara una sombra interna alejada del borde de la caja por 
unos 5 pixeles y con un efecto de difuminacion de 10 pixeles. 
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Hagalo usted mismo: Los estilos de los Listados 3-7 y 3-8 son solo ejemplos. Para 
comprobar los efectos en su navegador debe aplicar estos cambios al grupo 
completo de reglas presentado en el Listado 3-6. 

IMPORTANTE: Las sombras no expanden el elemento o incrementan su tamano, 
por lo que tendra que controlar cuidadosamente que el espacio disponible es 
suficiente para que la sombra sea expuesta y correctamente dibujada en la 
pantalla. 

Text-shadow 

Ahora que conoce todo acerca de sombras probablemente estara pensando en generar 
una para cada elemento de su documento. La propiedad box-shadow fue disenada 
especialmente para ser aplicada en cajas. Si intenta aplicar este efecto a un elemento 
<span>, por ejemplo, la caja invisible ocupada por este elemento en la pantalla tendra 
una sombra, pero no el contenido del elemento. Para crear sombras para figuras 
irregulares como textos, existe una propiedad especial llamada text -shadow: 


body { 

text-align: center; 

} 

ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 

-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px lOpx; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px lOpx; 
box-shadow: rgb(150,150,150) 5px 5px lOpx; 

} 

tttitulo { 

font: bold 36px verdana, sans-serif; 

text-shadow: rgb(0,0,150) 3px 3px 5px; 


Listado 3-9. Generando una sombra para el titulo. 
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Los valores para text-shadow son similares a los usados para box-shadow. Podemos 
declarar el color de la sombra, la distancia horizontal y vertical de la sombra con respecto 
al objeto y el radio de difuminacion. 

En el Listado 3-9 una sombra azul fue aplicada al tftulo de nuestra plantilla con una 
distancia de 3 pixeles y un radio de difuminacion de 5. 

@font-face 

Obtener un texto con sombra es realmente un muy buen truco de diseno, imposible de 
lograr con metodos previos, pero mas que cambiar el texto en s( mismo solo provee un 
efecto tridimensional. Una sombra, en este caso, es como pintar un viejo coche, al final 
sera el mismo coche. En este caso, sera el mismo tipo de letra. 

El problema con las fuentes o tipos de letra es tan viejo como la web. Usuarios regulares 
de la web a menudo tienen un numero limitado de fuentes instaladas en sus ordenadores, 
usualmente estas fuentes son diferentes de un usuario a otro, y la mayoria de las veces 
muchos usuarios tendran fuentes que otros no. Por anos, los sitios webs solo pudieron 
utilizar un limitado grupo de fuentes confiables (un grupo basico que practicamente todos 
los usuarios tienen instalados) y asi presentar la informacion en pantalla. 

La propiedad @font-face permite a los disenadores proveer un archivo conteniendo 
una fuente especifica para mostrar sus textos en la pagina. Ahora podemos incluir 
cualquier fuente que necesitemos con solo proveer el archivo adecuado: 


text-align: center; 

} 

ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 

-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px lOpx; 
-webkit-box-shadow: rgb(150,150,150) 5px 5px lOpx; 
box-shadow: rgb(150,150,150) 5px 5px lOpx; 

} 

fttitulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 

text-shadow: rgb(0,0,150) 3px 3px 5px; 
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@font-face { 

font-family: 'MiNuevaFuente' ; 
src: url('font.ttf 1 ) ; 


} 


Listado 3-10. Nueva fuente para el tltulo. 

Hagalo usted mismo: Descargue el archivo font.ttf desde nuestro sitio web o 
use uno que ya posea y copielo en el mismo directorio (carpeta) de su archivo 
CSS. Para descargar el archivo, visite el siguiente enlace: www.minkbooks.com/ 
content/font.ttf. Puede obtener mas fuentes similares de forma gratuita en 
www.moorstation.org/typoasis/designers/steffmann/. 

IMPORTANTE: El archivo conteniendo la fuente debe encontrarse en el mismo 
dominio que la pagina web (o en el mismo ordenador, en este caso). Esta es una 
restriccion de algunos navegadores como Firefox, por ejemplo. 

La propiedad @font-face necesita al menos dos estilos para declarar la fuente y 
cargar el archivo. El estilo construido con la propiedad font-family especifica el nombre 
que queremos otorgar a esta fuente en particular, y la propiedad src indica la URL del 
archivo con el codigo correspondiente a esa fuente. En el Listado 3-10, el nombre 
MiNuevaFuente fue asignado a nuestro nuevo tipo de letra y el archivo font.ttf fue 
indicado como el archivo correspondiente a esta fuente. 

Una vez que la fuente es cargada, podemos comenzar a usarla en cualquier elemento 
del documento simplemente escribiendo su nombre (MiNuevaFuente). En el estilo font 
en la regia del Listado 3-10, especificamos que el titulo sera mostrado con la nueva fuente 
o las alternativas verdana y sans-serif en caso de que la fuente incorporada no sea 
cargada apropiadamente. 

Gradiente lineal 

Los gradientes son uno de los efectos mas atractivos entre aquellos incorporados en CSS3. 
Este efecto era practicamente imposible de implementar usando tecnicas anteriores pero 
ahora es realmente facil de hacer usando CSS. Una propiedad background con algunos 
pocos parametros es suficiente para convertir su documento en una pagina web con 
aspecto profesional: 


body { 

text-align: center; 

} 

ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
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padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-border-radius: 20px; 

-webkit-border-radius: 20px; 
border-radius: 20px; 

-moz-box-shadow: rgb(150,150,150) 5px 5px lOpx; 

-webkit-box-shadow: rgb(150,150,150) 5px 5px lOpx; 
box-shadow: rgb(150,150,150) 5px 5px lOpx; 

background: -webkit-linear-gradient(top, #FFFFFF, #006699); 
background: -moz-linear-gradient(top, #FFFFFF, #006699); 

} 

tttitulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 
text-shadow: rgb(0,0,150) 3px 3px 5px; 

} 

@font-face { 

font-family: 'MiNuevaFuente'; 
src: url('font.ttf'); 


Listado 3-11. Agregando un hermoso gradiente defondo a nuestra caja. 

Los gradientes son configurados como fondos, por lo que podemos usar las 
propiedades background o background-image para declararlos. La sintaxis para los 
valores declarados en estas propiedades es linear-gradient (posicion inicio, 
color inicial, color final). Los atributOS de la funcion linear-gradient 0 
indican el punto de comienzo y los colores usados para crear el gradiente. El primer valor 
puede ser especificado en pixeles, porcentaje o usando las palabras clave top, bottom, 
left y right (como hicimos en nuestro ejemplo). El punto de comienzo puede ser 
reemplazado por un angulo para declarar una direccion especffica del gradiente: 


background: linear-gradient(3Odeg, #FFFFFF, #006699); 

Listado 3-12. Gradiente con un angulo de direccion de 30 grados. 

Tambien podemos declarar los puntos de terminacion para cada color: 


background: linear-gradient(top, #FFFFFF 50%, #006699 90%); 


Listado 3-13. Declarando puntos de terminacion. 
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Gradiente radial 

La sintaxis estandar para los gradientes radiales solo difiere en unos pocos aspectos con 
respecto a la anterior. Debemos usar la funcion radial - gradient () y un nuevo 
atributo para la forma: 


background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%); 


Listado 3-14. Gradiente radial. 

La posicion de comienzo es el origen y puede ser declarada en pixeles, porcentaje o 
una combinacion de las palabras clave center, top, bottom, left y right. Existen dos 
posibles valores para la forma (circle y ellipse) y la terminacion para el color indica el 
color y la posicion donde las transiciones comienzan. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por el 
codigo del Listado 3-14 para probar el efecto en su navegador (no olvide agregar los 
prefijos -moz- o -webkit- dependiendo del navegador que este usando). 

IMPORTANTE: En este momento el efecto de gradientes ha sido implementado por 
los navegadores en diferentes formas. Lo que hemos aprendido en este capitulo es 
el estandar propuesto por W3C (World Wide Web Consortium). Navegadores como 
Firefox y Google Chrome ya incorporan una implementation que trabaja con este 
estandar, pero Internet Explorer y otros aun se encuentran ocupados en ello. Como 
siempre, pruebe sus codigos en cada navegador disponible en el mercado para 
comprobar el estado actual de las diferentes implementaciones. 


RGBA 

Hasta este momento los colores fueron declarados como solidos utilizando valores 
hexadecimales o la funcion rgb() para decimales. CSS3 ha agregado una nueva funcion 
llamada rgba() que simplifica la asignacion de colores y transparencias. Esta funcion 
ademas resuelve un problema previo provocado por la propiedad opacity. 

La funcion rgbaO tiene cuatro atributos. Los primeros tres son similares a los usados 
en rgb() y simplemente declaran los valores para los colores rojo, verde y azul en 
numeros decimales del 0 al 255. El ultimo, en cambio, corresponde a la nueva capacidad 
de opacidad. Este valor se debe encontrar dentro de un rango que va de 0 a 1, con 0 como 
totalmente transparente y 1 como totalmente opaco. 


fttitulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 


74 



Propiedades CSS3 


text-shadow: rgba(0,0,0,0.5) 3px 3px 5px; 

} 


Listado 3-15. Mejorando la sombra del texto con transparencia. 

El Listado 3-15 ofrece un simple ejemplo que demuestra como los efectos son 
mejorados aplicando transparencia. Reemplazamos la funcion rgb() por rgbaO en la 
sombra del titulo y agregamos un valor de opacidad/transparencia de 0.5. Ahora la 
sombra de nuestro titulo se mezclara con el fondo, creando un efecto mucho mas natural. 

En previas versiones de CSS teniamos que usar diferentes tecnicas en diferentes 
navegadores para hacer un elemento transparente. Todas presentaban el mismo 
problema: el valor de opacidad de un elemento era heredado por sus hijos. Ese problema 
fue resuelto por rgbaO y ahora podemos asignar un valor de opacidad al fondo de una 
caja sin afectar su contenido. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-15 para probar el efecto en su navegador. 


HSLA 

Del mismo modo que la funcion rgba () agrega un valor de opacidad a rgb (), la funcion 
hsla () hace lo mismo para la funcion hsl (). 

La funcion hslaO es simplemente un funcion diferente para generar colores, pero es 
mas intuitiva que rgbaO . Algunos disenadores encontraran mas facil generar un set de 
colores personalizado utilizando hslaO. La sintaxis de esta funcion es: hsla(tono, 
saturacion, luminosidad, opacidad). 


fttitulo { 

font: bold 36px MiNuevaFuente, verdana, sans-serif; 
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px; 

color: hsla(120, 100%, 50%, 0.5); 

} 


Listado 3-16. Nuevo color para el titulo usando hsla (). 

Siguiendo la sintaxis, tono representa el color extraido de una rueda imaginaria y es 
expresado en grados desde 0 a 360. Cerca de 0 y 360 estan los colores rojos, cerca de 120 
los verdes y cerca de 240 los azules. El valor saturacion es representado en porcentaje, 
desde 0% (escala de grises) a 100% (todo color o completamente saturado). La 
luminosidad es tambien un valor en porcentaje desde 0% (completamente oscuro) a 
100% (completamente iluminado). El valor 50% representa luminosidad normal o 
promedio. El ultimo valor, asi como en rgba (), representa la opacidad. 
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Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-16 para probar el efecto en su navegador. 


Outline 

La propiedad outline es una vieja propiedad CSS que ha sido expandida en CSS3 para 
incluir un valor de desplazamiento. Esta propiedad era usada para crear un segundo 
borde, y ahora ese borde puede ser mostrado alejado del borde real del elemento. 


#principal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

outline: 2px dashed #000099; 
outline-offset: 15px; 


Listado 3-17. Agregando un segundo borde a la cabecera. 

En el Listado 3-17 agregamos a los estilos originalmente aplicados a la caja de nuestra 
plantilla un segundo borde de 2 pixeles con un desplazamiento de 15 pixeles. La propiedad 
outline tiene similares caracterfsticas y usa los mismos parametros que border. La 
propiedad outline-offset solo necesita un valor en pixeles. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-17 para probar el efecto en su navegador. 

Border-image 

Los posibles efectos logrados por las propiedades border y outline estan limitados a 
lineas simples y solo algunas opciones de configuration. La nueva propiedad border-image 
fue incorporada para superar estas limitaciones y dejar en manos del disenador la calidad y 
variedad de bordes disponibles ofreciendo la alternativa de utilizar imagenes propias. 

Hagalo usted mismo: Vamos a utilizar una imagen PNG que incluye diamantes 
para probar esta propiedad. Siga el siguiente enlace para descargar el archivo 
diamonds.png desde nuestro sitio web y luego copie este archivo en el mismo 
directorio (carpeta) donde se encuentra su archivo CSS: www.minkbooks.com/ 
content/diamonds.png. 
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La propiedad border-image toma una imagen y la utiliza como patron. De acuerdo a 
los valores otorgados, la imagen es cortada como un pastel, las partes obtenidas son luego 
ubicadas alrededor del objeto para construir el borde. 

29px 

I 

♦♦♦ 

Figura 3-1. Este es el patron desde el cual vamos a construir nuestro borde. 

Cada pieza es de 29 pixeles de ancho, como indica la figura. 


Para hacer el trabajo, necesitamos especificar tres atributos: el nombre del archivo de 
la imagen, el tamano de las piezas que queremos obtener del patron y algunas palabras 
clave para declarar como las piezas seran distribuidas alrededor del objeto. 


#principal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 

border: 2 9px; 

-moz-border-image: url("diamonds.png") 29 stretch; 
-webkit-border-image: url("diamonds.png") 29 stretch; 
border-image: url("diamonds.png") 29 stretch; 


Listado 3-18. Un borde personalizado para la cabecera. 

Con las modificaciones realizadas en el Listado 3-18 estamos definiendo un borde de 
29 pixeles para la caja de nuestra cabecera y luego cargando la imagen diamonds.png 
para construir ese borde. El valor 29 en la propiedad border-image declara el tamano de 
las piezas y stretch es uno de los metodos disponibles para distribuir estas piezas 
alrededor de la caja. 

Existen tres valores posibles para el ultimo atributo. La palabra clave repeat repetira 
las piezas tomadas de la imagen todas las veces que sea necesario para cubrir el lado del 
elemento. En este caso, el tamano de las piezas es preservado y la imagen sera cortada si 
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no existe mas espacio para ubicarla. La palabra clave round considerara que tan largo es 
el lado a ser cubierto y ajustara el tamano de las piezas para asegurarse que cubren todo 
el lado y ninguna pieza es cortada. Finalmente, la palabra clave stretch (usada en el 
Listado 3-18) estira solo una pieza para cubrir el lado completo. 

En nuestro ejemplo utilizamos la propiedad border para definir el tamano del borde, 
pero se puede tambien usar border-with para especificar diferentes tamanos para cada 
lado del elemento (la propiedad border-with usa cuatro parametros, con una sintaxis 
similar a margin y padding). Lo mismo ocurre con el tamano de cada pieza, hasta cuatro 
valores pueden ser declarados para obtener diferentes imagenes de diferentes tamanos 
desde el patron. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-18 para probar el efecto en su navegador. 

Transform y transition 

Los elementos HTML, cuando son creados, son como bloques solidos e inamovibles. 
Pueden ser movidos usando codigo Javascript o aprovechando librerfas populares como 
jQuery ( www.jquery.com ), por ejemplo, pero no existia un procedimiento estandar para 
este proposito hasta que CSS3 presento las propiedades transform y transition. 

Ahora ya no tenemos que pensar en como hacerlo. En su lugar, solo tenemos que 
conocer como ajustar unos pocos parametros y nuestro sitio web puede ser tan flexible y 
dinamico como lo imaginamos. 

La propiedad transform puede operar cuatro transformaciones basicas en un 
elemento: scale (escalar), rotate (rotar), skew (inclinar) y translate (trasladar o 
mover). Veamos como funcionan: 

Transform: scale 


#principal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: scale(2); 
-webkit-transform: scale(2); 


Listado 3-19. Cambiando la escala de la caja de la cabecera. 
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En el ejemplo del Listado 3-19 partimos de los estilos basicos utilizados para la 
cabecera generada en el Listado 3-2 y aplicamos transformation duplicando la escala del 
elemento. La funcion scale recibe dos parametros: el valor x para la escala horizontal y el 
valor y para la escala vertical. Si solo un valor es provisto el mismo valor es aplicado a 
ambos parametros. 

Numeros enteros y decimales pueden ser declarados para la escala. Esta escala es 
calculada por medio de una matriz. Los valores entre 0 y 1 reduciran el elemento, un valor 
de 1 mantendra las proporciones originales y valores mayores que 1 aumentaran las 
dimensiones del elemento de manera incremental. 

Un efecto atractivo puede ser logrado con esta funcion otorgando valores negativos: 


ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: scale (1,-1); 
-webkit-transform: scale(1,-1); 


Listado 3-20. Creando una imagen espejo con scale. 

En el Listado 3-20, dos parametros han sido declarados para cambiar la escala de la 
caja principal. El primer valor, 1, mantiene la proporcion original para la dimension 
horizontal de la caja. El segundo valor tambien mantiene la proporcion original, pero 
invierte el elemento verticalmente para producir el efecto espejo. 

Existen tambien otras dos funciones similares a scale pero restringidas a la dimension 
horizontal o vertical: scalex y scaleY. Estas funciones, por supuesto, utilizan un solo 
para metro. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-19 o 3-20 para probar el efecto en su navegador. 

Transform: rotate 

La funcion rotate rota el elemento en la direccion de las agujas de un reloj. El valor debe 
ser especificado en grados usando la unidad "deg": 


#principal { 


79 




El gran libro de HTML5, CSS3 y Javascript 


display: block; 
width: 5 0 Opx; 
margin: 5Opx auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: rotate(3Odeg); 
-webkit-transform: rotate(3Odeg); 


Listado 3-21. Rotando la caja. 

Si un valor negativo es declarado, solo cambiara la direccion en la cual el elemento es 
rotado. 


Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-21 para probar el efecto en su navegador. 

Transform: skew 

Esta funcion cambia la simetrla del elemento en grados y en ambas dimensiones. 


#principal { 

display: block; 
width: 50Opx; 
margin: 5Opx auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: skew(20deg); 
-webkit-transform: skew(20deg); 


Listado 3-22. Inclinar horizontalmente. 

La funcion skew usa dos parametros, pero a diferencia de otras funciones, cada 
parametro de esta funcion solo afecta una dimension (los parametros actuan de forma 
independiente). En el Listado 3-22, realizamos una operation transform a la caja de la 
cabecera para inclinarla. Solo declaramos el primer parametro, por lo que solo la dimension 
horizontal de la caja sera modificada. Si usaramos los dos parametros, podriamos alterar 
ambas dimensiones del objeto. Como alternativa podemos utilizar funciones diferentes para 
cada una de ellas: skewx y skewY. 
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Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-22 para probar el efecto en su navegador. 

Transform: translate 

Similar a las viejas propiedades top y left, la funcion translate mueve o desplaza el 
elemento en la pantalla a una nueva posicion. 


ttprincipal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: translate(lOOpx); 
-webkit-transform: translate(lOOpx); 


Listado 3-23. Moviendo la caja de la cabecera hacia la derecha. 

La funcion translate considera la pantalla como una grilla de pixeles, con la posicion 
original del elemento usada como un punto de referencia. La esquina superior izquierda 
del elemento es la posicion o,o, por lo que valores negativos moveran al objeto hacia la 
izquierda o hacia arriba de la posicion original, y valores positivos lo haran hacia la 
derecha o hacia abajo. 

En el Listado 3-23, movimos la caja de la cabecera hacia la derecha unos 100 pixeles 
desde su posicion original. Dos valores pueden ser declarados en esta funcion si queremos 
mover el elemento horizontal y verticalmente, o podemos usar funciones independientes 
llamadas translateXy translateY. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-23 para probar el efecto en su navegador. 

Transformando todo al mismo tiempo 

A veces podrfa resultar util realizar sobre un elemento varias transformaciones al mismo 
tiempo. Para obtener una propiedad transform combinada, solo tenemos que separar 
cada funcion a aplicar con un espacio: 


ttprincipal { 

display: block; 
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width: 5 0 Opx; 
margin: 5Opx auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transform: translateY(lOOpx) rotate(45deg) scaleX(0.3); 
-webkit-transform: translateY(lOOpx) rotate(45deg) scaleX(0.3); 


Listado 3-24. Moviendo, escalando y rotando el elemento con solo una tinea de codigo. 

Una de las cosas que debe recordar en este caso es que el orden es importante. Esto 
es debido a que algunas funciones mueven el punto original y el centro del objeto, 
cambiando de este modo los parametros que el resto de las funciones utilizaran para 
operar. 


Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-24 para probar el efecto en su navegador. 

Transformaciones dinamicas 

Lo que hemos aprendido hasta el momento en este capitulo cambiara la forma de la web, 
pero la mantendra tan estatica como siempre. Sin embargo, podemos aprovecharnos de la 
combinacion de transformaciones y pseudo clases para convertir nuestra pagina en una 
aplicacion dinamica: 


ttprincipal { 

display: block; 
width: 50Opx; 
margin: 5Opx auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

} 

#principal:hover{ 

-moz-transform: rotate(5deg); 
-webkit-transform: rotate(5deg); 

} 


Listado 3-25. Respondiendo a la actividad del usuario. 

En el Listado 3-25, la regia original del Listado 3-2 para la caja de la cabecera fue 
conservada intacta, pero una nueva regia fue agregada para aplicar efectos de transformation 
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usando la vieja pseudo clase : hover. El resultado obtenido es que cada vez que el puntero del 
raton pasa sobre esta caja, la propiedad transform rota la caja en 5 grados, y cuando el 
puntero se aleja la caja vuelve a rotar de regreso a su posicion original. Este efecto produce una 
animacion basica pero util con nada mas que propiedades CSS. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-25 para probar el efecto en su navegador. 

Transiciones 

De ahora en mas, hermosos efectos usando transformaciones dinamicas son accesibles y 
faciles de implementar. Sin embargo, una animacion real requiere de un proceso de mas 
de dos pasos. 

La propiedad transition fue incluida para suavizar los cambios, creando 
magicamente el resto de los pasos que se encuentran implfcitos en el movimiento. Solo 
agregando esta propiedad forzamos al navegador a tomar cartas en el asunto, crear para 
nosotros todos esos pasos invisibles, y generar una transicion suave desde un estado al 
otro. 


#principal { 

display: block; 
width: 500px; 
margin: 50px auto; 
padding: 15px; 
text-align: center; 
border: lpx solid #999999; 
background: #DDDDDD; 

-moz-transition: -moz-transform Is ease-in-out 0.5s; 
-webkit-transition: -webkit-transform Is ease-in-out 0.5s; 

} 

#principal:hover{ 

-moz-transform: rotate(5deg); 

-webkit-transform: rotate(5deg); 

} 


Listado 3-26. Una hermosa rotacion usando transiciones. 

Como puede ver en el Listado 3-26, la propiedad transition puede tomar hasta 
cuatro parametros separados por un espacio. El primer valor es la propiedad que sera 
considerada para hacer la transicion (en nuestro ejemplo elegimos transform). Esto es 
necesario debido a que varias propiedades pueden cambiar al mismo tiempo y 
probablemente necesitemos crear los pasos del proceso de transicion solo para una de 
ellas. El segundo parametro especifica el tiempo que la transicion se tomara para ir de la 
posicion inicial a la final. El tercer parametro puede ser cualquiera de las siguientes 
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palabras clave: ease, linear, ease-in, ease-out o ease-in-out. Estas palabras clave 
determinan como se realizara el proceso de transicion basado en una curva Bezier. Cada 
una de ellas representa diferentes tipos de curva Bezier, y la mejor forma de saber como 
trabajan es viendolas funcionar en pantalla. El ultimo parametro para la propiedad 
transition es el retardo. Este indica cuanto tiempo tardara la transicion en comenzar. 

Para producir una transicion para todas las propiedades que estan cambiando en un 
objeto, la palabra clave all debe ser especificada. Tambien podemos declarar varias 
propiedades a la vez listandolas separadas por coma. 

Hagalo usted mismo: Reemplace el correspondiente codigo del Listado 3-11 por 
el codigo del Listado 3-26 para probar el efecto en su navegador. 

IMPORTANTE: En el Listado 3-26 realizamos una transicion con la propiedad 
transform. No todas las propiedades CSS son soportadas por la propiedad 
transition en este momento y probablemente la lista cambie con el tiempo. 
Debera probar cada una de ellas por usted mismo o visitar el sitio web oficial de 
cada navegador para encontrar mas informacion al respecto. 

3.2 Referenda rapida 

CSS3 provee nuevas propiedades para crear efectos visuales y dinamicos que son parte 
esencial de la web en estos dias. 

border-radius Esta propiedad genera esquinas redondeadas para la caja formada por el 
elemento. Posee dos parametros diferentes que dan forma a la esquina. El primer 
parametro determina la curvatura horizontal y el segundo la vertical, otorgando la 
posibilidad de crear una elipsis. Para declarar ambos parametros de la curva, los 
valores deben ser separados por una barra (por ejemplo, border-radius: I5px / 
2 Opx). Usando solo un valor determinaremos la misma forma para todas las esquinas 
(por ejemplo, border - radius: 20px). Un valor para cada esquina puede ser 

declarado en un orden que sigue las agujas del reloj, comenzando por la esquina 
superior izquierda. 

box-shadow Esta propiedad crea sombras para la caja formada por el elemento. Puede 
tomar cinco parametros: el color, el desplazamiento horizontal, el desplazamiento 
vertical, el valor de difuminacion, y la palabra clave inset para generar una sombra 
interna. Los desplazamientos pueden ser negativos, y el valor de difuminacion y el valor 
inset son opcionales (por ejemplo, box-shadow: #000000 5px 5px lOpx inset), 
text-shadow Esta propiedad es similar a box-shadow pero espedfica para textos. Toma 
cuatro parametros: el color, el desplazamiento horizontal, el desplazamiento vertical, y 
el valor de difuminacion (por ejemplo, text-shadow: #000000 5px 5px lOpx). 
@font-face Esta regia nos permite cargar y usar cualquier fuente que necesitemos. 
Primero, debemos declarar la fuente, proveer un nombre con la propiedad font- 
family y especificar el archivo con src (por ejemplo, @font-face{ font-family: 
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Mifuente; src: uri (' font. ttf 1 ) }). Luego de esto, podremos asignar la fuente 
(en el ejemplo Mifuente) a cualquier elemento del documento. 

linear-gradient(posicion inicio, color inicial, color final) Esta funcion puede ser aplicada a 
las propiedades background o background-image para generar un gradiente lineal. 
Los atributos indican el punto inicial y los colores usados para crear el gradiente. El 
primer valor puede ser especificado en pixeles, en porcentaje o usando las palabras 
clave top, bottom, left y right. El punto de inicio puede ser reemplazado por un 
angulo para proveer una direccion especifica para el gradiente (por ejemplo, linear- 
gradient (top, #FFFFFF 50%, #006699 90%);). 

radial-gradient(posicion inicio, forma, color inicial, color final) Esta funcion puede ser 
aplicada a las propiedades background o background-image para generar un 
gradiente radial. La posicion de inicio es el origen y puede ser declarado en pixeles, 
porcentaje o como una combinacion de las palabras clave center, top, bottom, left 
y right. Existen dos valores para la forma: circle y ellipse, y puntos de 
terminacion pueden ser declarados para cada color indicando la posicion donde la 
transicion comienza (por ejemplo, radial-gradient (center, circle, #ffffff 
0%, #006699 200%) ;). 

rgba() Esta funcion es una mejora de rgb 0 . Toma cuatro valores: el color rojo (0-255), el 
color verde (0-255), el color azul (0-255), y la opacidad (un valor entre 0 y 1). 

hsla() Esta funcion es una mejora de hsl 0 . Puede tomar cuatro valores: el tono (un valor 
entre 0 y 360), la saturacion (un porcentaje), la luminosidad (un porcentaje), y la 
opacidad (un valor entre 0 y 1). 

outline Esta propiedad fue mejorada con la incorporacion de otra propiedad llamada 
outline-offset. Ambas propiedades combinadas generan un segundo borde 
alejado del borde original del elemento (por ejemplo, outline: lpx solid 
#000000; outline-offset: 10px;). 

border-image Esta propiedad crea un borde con una imagen personalizada. Necesita que 
el borde sea declarado previamente con las propiedades border o border-with, y 
toma al menos tres parametros: la URL de la imagen, el tamano de las piezas que seran 
tomadas de la imagen para construir el borde, y una palabra clave que especifica como 
esas piezas seran ubicadas alrededor del elemento (por ejemplo, border-image: 
url ("file.png") 15 stretch;). 

transform Esta propiedad modifica la forma de un elemento. Utiliza cuatro funciones 
basicas: scale (escalar), rotate (rotar), skew (inclinar), y translate (trasladar o 
mover). La funcion scale recibe solo un parametro. Un valor negativo invierte el 
elemento, valores entre 0 y 1 reducen el elemento y valores mayores que 1 expanden 
el elemento (por ejemplo, transform: scale (1.5) ;). La funcion rotate usa solo 
un parametro expresado en grados para rotar el elemento (por ejemplo, transform: 
rotate(20deg) ,-). La funcion skew recibe dos valores, tambien en grados, para la 
transformacion horizontal y vertical (por ejemplo, transform: skew(20deg, 
20deg) ;). La funcion translate mueve el objeto tantos pixeles como sean 
especificados por sus parametros (por ejemplo, transform: translate (20px);). 
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transition Esta propiedad puede ser aplicada para crear una transicion entre dos estados 
de un elemento. Recibe hasta cuatro parametros: la propiedad afectada, el tiempo que 
le tomara a la transicion desde el comienzo hasta el final, una palabra clave para 
especificar como la transicion sera realizada (ease, linear, ease-in, ease-out, 
ease-in-out) y un valor de retardo que determina el tiempo que la transicion 
tardara en comenzar (por ejemplo, transition: color 2s linear is;). 
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4.1 La relevancia de Javascript 

HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas: 
HTML, CSS y Javascript. Ya hemos estudiado los elementos incorporados en HTML y las 
nuevas propiedades que hacen CSS la herramienta ideal para disenadores. Ahora es 
momento de develar lo que puede ser considerado como uno de los pilares mas fuertes 
de esta especificacion: Javascript. 

Javascript es un lenguaje interpretado usado para multiples propositos pero solo 
considerado como un complemento hasta ahora. Una de las innovaciones que ayudo a 
cambiar el modo en que vemos Javascript fue el desarrollo de nuevos motores de 
interpretacion, creados para acelerar el procesamiento de codigo. La clave de los motores 
mas exitosos fue transformar el codigo Javascript en codigo maquina para lograr 
velocidades de ejecucion similares a aquellas encontradas en aplicaciones de escritorio. 
Esta mejorada capacidad permitio superar viejas limitaciones de rendimiento y confirmar 
el lenguaje Javascript como la mejor opcion para la web. 

Para aprovechar esta prometedora plataforma de trabajo ofrecida por los nuevos 
navegadores, Javascript fue expandido en relacion con portabilidad e integracion. A la vez, 
interfaces de programacion de aplicaciones (APIs) fueron incorporadas por defecto en 
cada navegador para asistir al lenguaje en funciones elementales. Estas nuevas APIs (como 
Web Storage, Canvas, y otras) son interfaces para librerias incluidas en navegadores. La 
idea es hacer disponible poderosas funciones a traves de tecnicas de programacion 
sencillas y estandares, expandiendo el alcance del lenguaje y facilitando la creacion de 
programas utiles para la web. 

En este capitulo vamos a estudiar como incorporar Javascript dentro de nuestros 
documentos HTML y veremos las incorporaciones recientes a este lenguaje con la 
intencion de prepararnos para el resto del libro. 

IMPORTANTE: Nuestro acercamiento a Javascript en este libro es introductorio. 
Al igual que con CSS, solo vamos a repasar las tecnicas que necesitamos entender 
para implementar los ejemplos de proximos capitulos. Trabajaremos sobre temas 
complejos, pero solo usando un minimo de codigo necesario para aprovechar 
estas nuevas caracterfsticas. Si necesita expandir sus conocimientos sobre este 
lenguaje, visite nuestro sitio web y siga los enlaces correspondientes a este 
capitulo. 
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4.2 Incorporando Javascript 

Siguiendo los mismos lineamientos que en CSS, existen tres tecnicas para incorporar 
codigo Javascript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusion de 
archivos externos es la recomendada a usar en HTML5. 

IMPORTANTE: En este capitulo introducimos nuevas caracteristicas asi como 
tecnicas basicas necesarias para entender los ejemplos del libro. Si usted se 
encuentra familiarizado con esta informacion sientase libre de obviar las partes 
que ya conoce. 

En li'nea 

Esta es una tecnica simple para insertar Javascript en nuestro documento que se 
aprovecha de atributos disponibles en elementos HTML. Estos atributos son manejadores 
de eventos que ejecutan codigo de acuerdo a la accion del usuario. 

Los manejadores de eventos mas usados son, en general, los relacionados con el raton, 
como por ejemplo onclick, onMouseOver, u onMouseOut. Sin embargo, encontraremos 
sitios web que implementan eventos de teclado y de la ventana, ejecutando acciones 
luego de que una tecla es presionada o alguna condicion en la ventana del navegador 
cambia (por ejemplo, onload u onfocus). 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 
</head> 

<div id="principal"> 

<p onclick="alert('hizo clic!')">Hacer Clic</p> 
<p>No puede hacer clic</p> 

</div> 

</html> 


Listado 4-1. Javascript en tinea. 

Usando el manejador de eventos onclick en el Listado 4-1, un codigo es ejecutado 
cada vez que el usuario hace clic con el raton sobre el texto que dice "Hacer Clic". Lo que 
el manejador onclick esta diciendo es algo como: "cuando alguien haga clic sobre este 
elemento ejecute este codigo" y el codigo en este caso es una funcion predefinida en 
Javascript que muestra una pequena ventana con el mensaje "hizo clic!". 
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Intente cambiar el manejador onclick por onMouseOver, por ejemplo, y vera como 
el codigo es ejecutado solo pasando el puntero del raton sobre el elemento. 

El uso de Javascript dentro de etiquetas HTML esta permitido en HTML5, pero por las 
mismas razones que en CSS, esta clase de practica no es recomendable. El codigo HTML se 
extiende innecesariamente y se hace dificil de mantener y actualizar. Asi mismo, el codigo 
distribuido sobre todo el documento complica la construccion de aplicaciones utiles. 

Nuevos metodos y tecnicas fueron desarrollados para referenciar elementos HTML y 
registrar manejadores de eventos sin tener que usar codigo en linea (inline). Volveremos 
sobre esto y aprenderemos mas sobre eventos y manejadores de eventos mas adelante en 
este capitulo. 

Hagalo usted mismo: Copie el codigo del Listado 4-1 y los siguientes codigos 
estudiados en este capitulo dentro de un nuevo archivo HTML. Abra el archivo en 
su navegador para probar cada ejemplo. 

Embebido 

Para trabajar con codigos extensos y funciones personalizadas debemos agrupar los 
codigos en un mismo lugar entre etiquetas <script>. El elemento <script> actua 
exactamente igual al elemento <style> usado para incorporar estilos CSS. Nos ayuda a 
organizar el codigo en un solo lugar, afectando a los elementos HTML por medio de 
referencias. 

Del mismo modo que con el elemento <style>, en HTML5 no debemos usar ningun 
atributo para especificar lenguaje. Ya no es necesario incluir el atributo type en la 
etiqueta <script>. HTML5 asigna Javascript por defecto. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<script> 

function mostraralerta() { 
alert('hizo clic!'); 

} 

function hacerclic(){ 

document.getElementsByTagName('p')[0].onclick=mostraralerta; 

} 

window.onload=hacerclic; 

</script> 

</head> 

<body> 

<div id="principal"> 

<p>Hacer Clic</p> 

<p>No puede hacer Clic</p> 

</div> 
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</body> 

</html> 


Listado 4-2. Javascript embebido. 

El elemento <script> y su contenido pueden ser posicionados en cualquier lugar del 
documento, dentro de otros elementos o entre ellos. Para mayor claridad, recomendamos 
siempre colocar sus codigos Javascript en la cabecera del documento (como en el ejemplo 
del Listado 4-2) y luego referenciar los elementos a ser afectados usando los metodos 
Javascript apropiados para ese proposito. 

Actualmente existen tres metodos disponibles para referenciar elementos HTML desde 
Javascript: 

• getEiementsByTagName (usado en el Listado 4-2) referenda un elemento 
por su nombre o palabra clave. 

• getEiementByid referenda un elemento por el valor de su atributo id. 

• getElementsByClassName es una nueva incorporacion que nos permite 
referenciar un elemento por el valor de su atributo class. 

Incluso si seguimos la practica recomendada (posicionar el codigo dentro de la 
cabecera del documento), una situacion debe ser considerada: el codigo del documento es 
leido de forma secuencial por el navegador y no podemos referenciar un elemento que 
aun no ha sido creado. 

En el Listado 4-2, el codigo es posicionado en la cabecera del documento y es leido por 
el navegador previo a la creacion del elemento <p> que estamos referenciando. Si 
hubiesemos intentado afectar el elemento <p> directamente con una referencia, 
hubieramos recibido un mensaje de error anunciando que el elemento no existe. Para 
evitar este problema, el codigo fue convertido a una funcion llamada mostraralerta 0 , 
y la referencia al elemento <p> junto con el manejador del evento fueron colocados en 
una segunda funcion llamada hacerclic 0 . 

Las funciones son llamadas desde la ultima linea del codigo usando otro manejador de 
eventos (en este caso asociado con la ventana) llamado onload. Este manejador 
ejecutara la funcion hacerclic 0 cuando el documento sea completamente cargado y 
todos los elementos creados. 

Es tiempo de analizar como el documento del Listado 4-2 es ejecutado. Primero las 
funciones Javascript son cargadas (declaradas) pero no ejecutadas. Luego los elementos 
HTML, incluidos los elementos <p>, son creados. Y finalmente, cuando el documento 
completo es cargado en la ventana del navegador, el evento load es disparado y la 
funcion hacerclic () es llamada. 

En esta funcion, el metodo getEiementsByTagName referencia todos los elementos 
<p>. Este metodo retorna un arreglo (array) conteniendo una lista de los elementos de la 
clase especificada encontrados en el documento. Sin embargo, usando el indice [0] al 
final del metodo indicamos que solo queremos que el primer elemento de la lista sea 
retornado. Una vez que este elemento es identificado, el codigo registra el manejador de 
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eventos onclick para el mismo. La funcion mostraralerta 0 sera ejecutada cuando el 
evento click es disparado sobre este elemento mostrando el mensaje "hizo clic!". 

Puede parecer mucho codigo y trabajo para reprodudr el mismo efecto logrado por 
una simple Ifnea en el ejemplo del Listado 4-1. Sin embargo, considerando el potencial de 
HTML5 y la complejidad alcanzada por Javascript, la concentracion del codigo en un unico 
lugar y la apropiada organizacion representa una gran ventaja para nuestras futuras 
implementaciones y para hacer nuestros sitios web y aplicaciones faciles de desarrollar y 
mantener. 

Conceptos basicos: Una funcion es un codigo agrupado que es ejecutado solo 
cuando la funcion es invocada (activada o llamada) por su nombre. Normalmente, 
una funcion es llamada usando su nombre y algunos valores encerrados entre 
parentesis (por ejemplo, hacerclic(l,2)). Una excepcion a esta sintaxis es 
usada en el Listado 4-2. En este codigo no usamos parentesis porque estamos 
pasando al evento solo la referenda a la funcion, no el resultado de su ejecucion. 
Para aprender mas sobre funciones Javascript, visite nuestro sitio web y siga los 
enlaces correspondientes a este capitulo. 

Archivos externos 

Los codigos Javascript crecen exponencialmente cuando agregamos nuevas funciones y 
aplicamos algunas de las APIs mencionadas previamente. Codigos embebidos incrementan 
el tamano de nuestros documentos y los hacen repetitivos (cada documento debe volver a 
incluir los mismos codigos). Para reducir los tiempos de descarga, incrementar nuestra 
productividad y poder distribuir y reusar nuestros codigos en cada documento sin 
comprometer eficiencia, recomendamos grabar todos los codigos Javascript en uno o mas 
archivos externos y llamarlos usando el atributo src: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<script src="micodigo.j s"></script> 

</head> 

<body> 

<div id="principal"> 

<p>Hacer Clic</p> 

<p>No puede hacer Clic</p> 

</div> 

</body> 

</html> 


Listado 4-3. Cargando el codigo desde archivos externos. 
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El elemento <script> en el Listado 4-3 carga los codigos Javascript desde un archivo 
externo llamado micodigo. js. De ahora en mas, podremos insertar nuestros codigos en 
este archivo y luego incluir el mismo en cualquier documento de nuestro sitio web que lo 
necesite. Desde la perspectiva del usuario, esta practica reduce tiempos de descarga y 
acceso a nuestro sitio web, mientras que para nosotros simplifica la organizacion y facilita 
el mantenimiento. 

Hagalo usted mismo: Copie el codigo del Listado 4-3 dentro del archivo HTML 
previamente creado. Cree un nuevo archivo de texto vacio llamado 
micodigo . j s y copie en su interior el codigo Javascript del Listado 4-2. Tenga en 
cuenta que solo el codigo entre las etiquetas <script> debe ser copiado, sin 
incluir las etiquetas mismas. 

4.3 Nuevos Selectores 

Como vimos anteriormente, los elementos HTML tienen que ser referenciados desde 
Javascript para ser afectados por el codigo. Si recuerda de previos capitulos, CSS, y 
especialmente CSS3, ofrece un poderoso sistema de referenda y seleccion que no tiene 
comparacion con los pocos metodos provistos por Javascript para este proposito. Los 
metodos getElementByld, getElementsByTagName y getElementsByClassName no 
son suficientes para contribuir a la integracion que este lenguaje necesita y sostener la 
relevancia que posee dentro de la especificacion de HTML5. Para elevar Javascript al nivel 
que las circunstancias requieren, nuevas alternativas debieron ser incorporadas. Desde 
ahora podemos seleccionar elementos HTML aplicando toda clase de selectores CSS por 
medio de los nuevos metodos querySelector () y querySelectorAll (). 

querySelector() 

Este metodo retorna el primer elemento que concuerda con el grupo de selectores 
especificados entre parentesis. Los selectores son declarados usando comillas y la misma 
sintaxis CSS, como en el siguiente ejemplo: 


function hacerclic(){ 

document.querySelector("ttprincipal p:first- 

child") .onclick=mostraralerta; 

} 

function mostraralerta(){ 
alert ('hizo die! 1 ); 

} 

window.onload=hacerclic ; 


Listado 4-4. Usando querySelector (). 
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En el Listado 4-4, el metodo getElementsByTagName usado anteriormente ha sido 
reemplazado por querySelector (). Los selectores para esta consulta en particular 
estan referenciando al primer elemento <p> que es hijo del elemento identificado con el 
atributo id y el valor main. 

Debido a que ya explicamos que este metodo solo retorna el primer elemento 
encontrado, probablemente notara que la pseudo clase first-child es redundante. El 
metodo querySelector () en nuestro ejemplo retornara el primer elemento <p> dentro 
de <div> que es, por supuesto, su primer hijo. El proposito de este ejemplo es mostrarle 
que querySelector () acepta toda clase de selectores validos CSS y ahora, del mismo 
modo que en CSS, Javascript tambien provee herramientas importantes para referenciar 
cada elemento en el documento. 

Varios grupos de selectores pueden ser declarados separados por coma. El metodo 
querySelector () retornara el primer elemento que concuerde con cualquiera de ellos. 

Hagalo usted mismo: Reemplace el codigo en el archivo micodigo. js por el 
provisto en el Listado 4-4 y abra el archivo HTML con el codigo del Listado 4-3 en 
su navegador para ver el metodo querySelector () en accion. 

querySelectorAII() 

En lugar de uno, el metodo querySelectorAll () retorna todos los elementos que 
concuerdan con el grupo de selectores declarados entre parentesis. El valor retornado es 
un arreglo (array) conteniendo cada elemento encontrado en el orden en el que aparecen 
en el documento. 


function hacerclic(){ 

var lista=document.querySelectorAll("#principal p"); 

lista [0] .onclick=mostraralerta; 

} 

function mostraralerta(){ 
alert('hizo clic! 1 ); 

} 

window.onload=hacerclic; 


Listado 4-5. Usando querySelectorAll (). 

El grupo de selectores especificados en el metodo querySelectorAll () del Listado 
4-5 encontrara cada elemento <p> en el documento HTML del listado 4-3 que es hijo del 
elemento <div>. Luego de la ejecucion de esta primera linea, el array lista tendra dos 
valores: una referenda al primer elemento <p> y una referenda al segundo elemento 
<p>. Debido a que el indice de cada array comienza por 0, en la proxima linea el primer 
elemento encontrado es referenciado usando corchetes y el valor 0 (lista [0]). 

Note que este ejemplo no muestra el potencial de querySelectorAll (). 
Normalmente sera utilizado para afectar a varios elementos y no solo uno, como en este 
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caso. Para interactuar con una lista de elementos retornados por este metodo, podemos 
utilizar un bucle for: 


function hacerclic(){ 

var lista=document.querySelectorAll("#principal p"); 

for(var f=0; f<lista.length; f++){ 
lista[f].onclick=mostraralerta; 

} 

} 

function mostraralerta(){ 
alert ('hizo clic! 1 ); 

} 

window.onload=hacerclic; 


Listado 4-6. Afectando todos los elementos encontrados por querySelectorAll (). 

En el Listado 4-6, en lugar de seleccionar solo el primer elemento encontrado, 
registramos el manejador de eventos onclick para cada uno de ellos usando un bucle 
for. Ahora, todos los elementos <p> dentro de <div> mostraran una pequena ventana 
cuando el usuario haga clic sobre ellos. 

El metodo querySelectorAll (), al igual que querySelector (), puede contener 
uno o mas grupos de selectores separados por coma. Estos y los demas metodos 
estudiados pueden ser combinados para referenciar elementos a los que resulta diffcil 
llegar. Por ejemplo, en el proximo listado, el mismo resultado del codigo del Listado 4-6 es 
logrado utilizando querySelectorAll () ygetElementByld () juntos: 


function hacerclic(){ 

var lista=document.getElementByld('principal'). 

querySelectorAll("p"); 

lista [0] .onclick=mostraralerta; 

} 

function mostraralerta(){ 
alert('hizo clic! 1 ); 

} 

window.onload=hacerclic; 


Listado 4-7. Combinando metodos. 

Usando esta tecnica podemos ver que precisos pueden ser estos metodos. Podemos 
combinarlos en una misma linea y luego realizar una segunda seleccion con otro metodo 
para alcanzar elementos dentro de los primeros. En proximos capitulos estudiaremos 
algunos ejemplos mas. 
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4.4 Manejadores de eventos 

Como comentamos anteriormente, el codigo Javascript es normalmente ejecutado luego 
de que el usuario realiza alguna accion. Estas acciones y otros eventos son procesados por 
manejadores de eventos y funciones Javascript asociadas con ellos. 

Existen tres diferentes formas de registrar un evento para un elemento HTML: 
podemos agregar un nuevo atributo al elemento, registrar un manejador de evento como 
una propiedad del elemento o usar el nuevo metodo estandar addEventListener (). 

Conceptos basicos: En Javascript las acciones de los usuarios son llamadas eventos. 
Cuando el usuario realiza una accion, como un clic del raton o la presion de una 
tecla, un evento especifico para cada accion y cada elemento es disparado. Ademas 
de los eventos producidos por los usuarios existen tambien otros eventos 
disparados por el sistema (por ejemplo, el evento load que se dispara cuando el 
documento es completamente cargado). Estos eventos son manejados por codigos 
o funciones. El codigo que responde al evento es llamado manejador. Cuando 
registramos un manejador lo que hacemos es definir como nuestra aplicacion 
respondera a un evento en particular. Luego de la estandarizacion del metodo 
addEventListener (), este procedimiento es usualmente llamado "escuchar al 
evento", y lo que hacemos para preparar el codigo que respondera a ese evento es 
"agregar una escucha" a un elemento en particular. 

Manejadores de eventos en linea 

Ya utilizamos esta tecnica en el codigo del Listado 4-1 incluyendo el atributo onciick en el 
elemento <p> (revise este codigo para comprobar como se aplica). Se trata simplemente de 
utilizar los atributos provistos por HTML para registrar eventos para un elemento en 
particular. Esta es una tecnica en desuso pero aun extremadamente util y practica en 
algunas circunstancias, especialmente cuando necesitamos hacer modificaciones rapidas 
para testeo. 

Manejadores de eventos como propiedades 

Para evitar las complicaciones de la tecnica en linea (inline), debemos registrar los eventos 
desde el codigo Javascript. Usando selectores Javascript podemos referenciar el elemento 
HTML y asignarle el manejador de eventos que queremos como si fuese una propiedad. 

En el codigo del Listado 4-2 encontrara esta tecnica puesta en practica. Dos 
manejadores de eventos fueron asignados como propiedades a diferentes elementos. El 
manejador de eventos onload fue registrado para la ventana usando la construccion 
window.onload, y el manejador de eventos onciick fue registrado para el primer 
elemento <p> encontrado en el documento con la linea de codigo 
document.getElementsByTagName(‘p 1 )[0].onciick. 
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Conceptos Basicos: Los nombres de los manejadores de eventos son construidos 
agregando el prefijo on al nombre del evento. Por ejemplo, el nombre del 
manejador de eventos para el evento click es onciick. Cuando estamos 
hablando sobre onciick usualmente hacemos referenda al codigo que sera 
ejecutado cuando el evento click se produzca. 

Antes de HTML5, esta era la unica tecnica disponible para usar manejadores de 
eventos desde Javascript que funcionaba en todos los navegadores. Algunos fabricantes 
de navegadores estaban desarrollando sus propios sistemas, pero nada fue adoptado por 
todos hasta que el nuevo estandar fue declarado. Por este motivo recomendamos utilizar 
esta tecnica por razones de compatibilidad, pero no la sugerimos para sus aplicaciones 
HTML5. 

El metodo addEventListener() 

El metodo addEventListener () es la tecnica ideal y la que es considerada como 
estandar por la especificacion de HTML5. Este metodo tiene tres argumentos: el nombre 
del evento, la funcion a ser ejecutada y un valor booleano (falso o verdadero) que indica 
como un evento sera disparado en elementos superpuestos. 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Este texto es el titulo del documento</title> 

<script> 

function mostraralerta() { 
alert('hizo clic!'); 

} 

function hacerclic(){ 

var elemento=document.getElementsByTagName('p')[0]; 
elemento.addEventListener('click', mostraralerta, false); 

} 

window.addEventListener('load', hacerclic, false); 

</script> 

</head> 

<body> 

<div id="principal"> 

<p>Hacer Clic</p> 

<p>No puede hacer Clic</p> 

</div> 

</html> 


Listado 4-8. Agregando escuchas para eventos con addEventListener (). 
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El Listado 4-8 presenta el mismo codigo que el Listado 4-2 pero ahora una escucha fue 
agregada para cada evento usando el metodo addEventListener (). Para organizar el 
codigo en la funcion hacerclicO, asignamos la referenda al elemento a una variable 
llamada elemento y luego agregamos la escucha para el evento click usando esa 
variable. 

La sintaxis del metodo addEventListener () es la mostrada en el Listado 4-8. El 
primer atributo es el nombre del evento. El segundo es la funcion a ser ejecutada, la cual 
puede ser una referenda a una funcion (como en este caso) o una funcion anonima. El 
tercer atributo especificara, usando true (verdadero) o false (falso), como multiples 
eventos seran disparados. Por ejemplo, si estamos escuchando al evento click en dos 
elementos que se encuentran anidados (uno dentro de otro), cuando el usuario hace die 
sobre estos elementos dos eventos click son disparados en un orden que depende de 
este valor. Si el atributo es declarado como true para uno de los elementos, entonces ese 
evento sera considerado primero y el otro luego. Normalmente el valor false es el mas 
adecuado para la mayoria de las situaciones. 

Conceptos basicos: Funciones anonimas son funciones dinamicamente declaradas 
y que no tienen nombre (por esto son llamadas "anonimas"). Esta clase de 
funciones son extremadamente utiles en Javascript, nos ayudan a organizar el 
codigo y no sobre poblar el objeto global con funciones independientes. Usaremos 
funciones anonimas con frecuencia en los siguientes capitulos. 

Incluso cuando los resultados de aplicar esta tecnica y la anterior son similares, 
addEventListener () nos permite agregar tantas escuchas como necesitemos para el 
mismo elemento. Esta distincion le otorga a addEventListener () una ventaja sobre el 
resto, convirtiendola en la tecnica ideal para aplicaciones HTML5. 

Debido a que los eventos son la clave para sitios webs y aplicaciones interactivas, 
varios fueron agregados en la especificacion de HTML5. En proximos capitulos 
estudiaremos cada uno de estos nuevos eventos y el entorno en el cual trabajan. 


4.5 APIs 


Si cuenta con alguna experiencia anterior en programacion, o simplemente siguio este 
capitulo desde el comienzo, le resultara facil reconocer la cantidad de codigo necesario 
para realizar tareas sencillas. Ahora imagine todo el trabajo que deberia hacer para 
construir un sistema de bases de datos desde cero, o generar graficos complejos en la 
pantalla, o crear una aplicacion para manipulacion de imagenes, por nombrar unos pocos. 

Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este 
momento. Y por la misma razon que lenguajes de programacion profesionales poseen 
librerias para crear elementos graficos, motores 3D para video juegos o interfaces para 
acceder a bases de datos, Javascript cuenta con APIs para ayudar a los programadores a 
lidiar con actividades complejas. 
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HTML5 introduce varias APIs (interfaces de programacion de aplicaciones) para 
proveer acceso a poderosas librerias desde simple codigo Javascript. El potencial de estas 
incorporaciones es tan importante que pronto se convertiran en nuestro objeto de 
estudio. Veamos rapidamente sus caracterfsticas para obtener una perspectiva de lo que 
nos encontraremos en el resto del libro. 

La siguiente es solo una introduccion, mas adelante estudiaremos cada una de estas 
tecnologfas con mayor profundidad. 

Canvas 

Canvas es una API grafica que provee una basica pero poderosa superficie de dibujo. Esta 
es la mas maravillosa y prometedora API de todas. La posibilidad de generar e imprimir 
graficos en pantalla, crear animaciones o manipular imagenes y videos (combinado con la 
funcionalidad restante de HTML5) abre las puertas para lo que nos podamos imaginar. 

Canvas genera una imagen con pixeles que son creados y manipulados por funciones y 
metodos provistos especfficamente para este proposito. 

Drag and Drop 

Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como 
lo harfamos comunmente en aplicaciones de escritorio. Ahora, con unas pocas lineas de 
codigo, podemos hacer que un elemento este disponible para ser arrastrado y soltado 
dentro de otro elemento en la pantalla. Estos elementos pueden incluir no solo graficos 
sino ademas textos, enlaces, archivos o datos en general. 

Geolocation 

Geolocation es utilizada para establecer la ubicacion fisica del dispositivo usado para 
acceder a la aplicacion. Existen varios metodos para acceder a esta informacion, desde 
senales de red hasta el Sistema de Posicionamiento Global (GPS). Los valores retornados 
incluyen latitud y longitud, posibilitando la integracion de esta API con otras como Google 
Maps, por ejemplo, o acceder a informacion de localizacion especifica para la construccion 
de aplicaciones practicas que trabajen en tiempo real. 

Storage 

Dos APIs fueron creadas con propositos de almacenamiento de datos: Web Storage e 
Indexed Database. Basicamente, estas APIs transfieren la responsabilidad por el 
almacenamiento de datos del servidor al ordenador del usuario, pero en el caso de Web 
Storage y su atributo sessionStorage, esta incorporacion tambien incrementa el nivel de 
control y la eficiencia de las aplicaciones web. 

Web Storage contiene dos importantes atributos que son a veces considerados APIs 
por si mismos: sessionStorage y localStorage. 
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El atributo sessionStorage es responsable por mantener consistencia sobre la duracion 
de la sesion de una pagina web y preservar informacion temporal como el contenido de 
un carro de compras, asegurando los datos en caso de accidente o mal uso (cuando la 
aplicacion es abierta en una segunda ventana, por ejemplo). 

Por el otro lado, el atributo localStorage nos permite grabar contenidos extensos de 
informacion en el ordenador del usuario. La informacion almacenada es persistente y no 
expira, excepto por razones de seguridad. 

Ambos atributos, sessionStorage y localStorage reemplazan la anterior funcion del 
sistema de cookies y fueron creados para superar sus limitaciones. 

La segunda API, agrupada dentro de las APIs de almacenamiento pero independiente 
del resto, es Indexed Database. La funcion elemental de un sistema de base de datos es la 
de almacenar informacion indexada. Web Storage API trabaja sobre el almacenamiento de 
grandes o pequenas cantidades de informacion, datos temporales o permanentes, pero 
no datos estructurados. Esta es una posibilidad solo disponible para sistemas de base de 
datos y la razon de la existencia de esta API. 

Indexed Database es una sustitucion de la API Web SQL Database. Debido a desacuerdos 
acerca del estandar apropiado a utilizar, ninguna de estas dos APIs ha sido completamente 
adoptada. De hecho, en este mismo momento, el desarrollo de Web SQL Database API (la 
cual habia sido recibida con brazos abiertos al comienzo), ha sido cancelado. 

Debido a que la API Indexed Database, tambien conocida como IndexedDB, luce mas 
prometedora y tiene el apoyo de Microsoft, los desarrolladores de Firefox y Google, sera 
nuestra opcion para este libro. Sin embargo, tenga siempre presente que en este 
momento nuevas implementaciones de SQL estan siendo consideradas y la situacion 
podria cambiar en el futuro cercano. 

File 

Bajo el titulo de File, HTML5 ofrece varias APIs destinadas a operar con archivos. En este 
momento existen tres disponibles: File, File: Directories & System, y File: Writer. 

Gracias a este grupo de APIs, ahora podemos crear y procesar archivos en el 
ordenador del usuario. 

Communication 

Algunas API tienen un denominador comun que nos permite agruparlas juntas. Este es el 
caso para XMLHttpRequest Level 2, Cross Document Messaging, y Web Sockets. 

Internet ha estado siempre relacionado con comunicaciones, por supuesto, pero 
algunos asuntos no resueltos hacian el proceso complicado y en ocasiones imposible. Tres 
problemas especificos fueron abordados en HTML5: la API utilizada para la creacion de 
aplicaciones Ajax no estaba completa y era complicada de implementar a traves de 
distintos navegadores, la comunicacion entre aplicaciones no relacionadas era no existia, y 
no habia forma de establecer una comunicacion bidireccional efectiva para acceder a 
informacion en el servidor en tiempo real. 



El gran libro de HTML5, CSS3 y Javascript 


El primer problems fue resuelto con el desarrollo de XMLHttpRequest Level 2. 
XMLHttpRequest fue la API usada por mucho tiempo para crear aplicaciones Ajax, codigos 
que acceden al servidor sin recargar la pagina web. El nivel 2 de esta API incorpora nuevos 
eventos, provee mas funcionalidad (con eventos que permiten hacer un seguimiento del 
proceso), portabilidad (la API es ahora estandar), y accesibilidad (usando solicitudes 
cruzadas, desde un dominio a otro). 

La solucion para el segundo problems fue la creacion de Cross Document Messaging. 
Esta API ayuda a los desarrolladores a superar las limitaciones existentes para comunicar 
diferentes cuadros y ventanas entre si. Ahora una comunicacion segura a traves de 
diferentes aplicaciones es ofrecida por esta API utilizando mensajes. 

La solucion para el ultimo de los problemas listados anteriormente es Web Sockets. Su 
proposito es proveer las herramientas necesarias para la creacion de aplicaciones de red 
que trabajan en tiempo real (por ejemplo, salas de chat). La API les permite a las 
aplicaciones obtener y enviar informacion al servidor en perfodos cortos de tiempo, 
volviendo posible las aplicaciones en tiempo real para la web. 

Web Workers 

Esta es una API unica que expande Javascript a un nuevo nivel. Este lenguaje no es un 
lenguaje multitarea, lo que significa que solo puede hacerse cargo de una sola tarea a la 
vez. Web Workers provee la posibilidad de procesar codigo detras de escena (ejecutado 
aparte del resto), sin interferir con la actividad en la pagina web y del codigo principal. 
Gracias a esta API Javascript ahora puede ejecutar multiples tareas al mismo tiempo. 

History 

Ajax cambio la forma en la que los usuarios interactuan con sitios y aplicaciones web. Y los 
navegadores no estaban preparados para esta situacion. History fue implementada para 
adaptar las aplicaciones modernas a la forma en que los navegadores hacen seguimiento 
de la actividad del usuario. Esta API incorpora tecnicas para generar artificialmente URLs 
por cada paso en el proceso, ofreciendo la posibilidad de retorna a estados previos de la 
aplicacion utilizando procedimientos estandar de navegacion. 

Offline 

Incluso hoy dia, con acceso a Internet en cada lugar que vamos, quedar desconectado es 
aun posible. Dispositivos portatiles se encuentran en todas partes, pero no la serial para 
establecer comunicacion. Y los ordenadores de escritorio tambien pueden dejarnos 
desconectados en los momentos mas criticos. Con la combinacion de atributos HTML, 
eventos controlados por Javascript y archivos de texto, Offline permitira a las aplicaciones 
trabajar en linea o desconectados, de acuerdo a la situacion del usuario. 
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4.6 Librerfas externas 

HTML5 fue desarrollado para expandir la web utilizando un set de tecnologias estandar 
que todo navegador pueda entender y procesar. Y fue creado para proveer todas las 
herramientas que un desarrollador necesita. De hecho, HTML5 fue conceptualizado para 
no depender de tecnologias de terceras partes. Pero por una razon u otra siempre 
necesitaremos contar con ayuda extra. 

Antes de la aparicion de HTML5, varias librerfas Javascript fueron desarrolladas para 
superar las limitaciones de las tecnologias disponibles al momento. Algunas de estas 
librerfas tenfan propositos especfficos (desde procesamiento y validacion de formularios 
hasta generacion y manipulacion de graficos). Algunas se volvieron extremadamente 
populares y otras son casi imposibles de imitar por desarrolladores independientes (como 
es el caso de Google Maps). 

Incluso cuando futuras implementaciones provean mejores metodos o funciones, los 
programadores siempre encontraran una manera mas facil de lidiar con un asunto 
determinado. Librerfas desarrolladas por terceros que facilitan tareas complicadas 
siempre estaran vivas y creciendo en numero. 

Estas librerfas no son parte de HTML5 pero son una parte importante de la web y 
algunas de ellas son actualmente usadas en sitios web y aplicaciones exitosas. Junto con el 
resto de las funciones incorporadas por esta especificacion, mejoran Javascript y acercan 
las tecnologias de ultima generacion al publico en general. 

jQuery 

Esta es la librerfa web mas popular disponible en estos dfas. La librerfa jQuery es gratuita y 
fue disenada para simplificar la creacion de sitios web modernos. Facilita la seleccion de 
elementos HTML, la creacion de animaciones y efectos, y tambien controla eventos y 
ayuda a implementar Ajax en nuestras aplicaciones. 

La librerfa jQuery se encuentra en un archivo pequeno que se puede descargar desde 
www.jquery.com y luego incluir en nuestros documentos usando la etiqueta <script>. 
Provee una API sencilla que cualquiera puede aprendery rapidamente aplicara sus proyectos. 

Una vez que el archivo provisto por jQuery es incluido en nuestro documento, ya 
estamos listos para aprovechar los metodos simples incorporados por la librerfa y 
convertir nuestra web estatica en una moderna y practica aplicacion. 

jQuery tiene la ventaja de proveer soporte para viejos navegadores y vuelve simple tareas 
cotidianas. Puede ser utilizado junto con HTML5 o como una forma simple de reemplazar 
funciones de HTML5 en navegadores que no estan preparados para esta tecnologfa. 

Google Maps 

Accesible por medio de Javascript (y otras tecnologias), Google Maps es un complejo y 
unico set de herramientas que nos permite desarrollar cualquier servicio de mapeado para 
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la web que podamos imaginar. Google se ha vuelto el lider en esta clase de servicios y a 
traves de la tecnologfa Google Maps provee acceso a un extremadamente preciso y 
detallado mapa del mundo. Utilizando esta API podemos encontrar lugares especfficos, 
calcular distancias, hallar sitios populares o incluso obtener una vista del lugar 
seleccionado como si estuvieramos presentes. 

Google Maps es gratuita y disponible para todo desarrollador. Diferentes versiones de 
la API se pueden encontrar en: code.google.com/apis/maps/. 


4.7 Referenda rapida 

En HTML5, Javascript fue mejorado por medio de la adicion de nuevas funciones y la 
incorporacion de metodos nativos. 

Elementos 

<script> Este elemento ahora tiene a Javascript como el lenguaje por defecto. El atributo 
type ya no es necesario. 

Selectores 

La posibilidad de seleccionar un elemento del documento dinamicamente desde codigo 
Javascript se ha vuelto esencial para cualquier aplicacion web. Nuevos metodos han sido 
incorporados con este proposito. 

getElementsByClassName Este selector nos permite encontrar elementos en el 
documento por medio del valor de su atributo class. Es una adicion a los ya 
conocidos getElementsByTagName y getElementByld. 
querySelector(selectores) Este metodo usa selectores CSS para referenciar elementos en 
el documento. Los selectores son declarados entre parentesis. Este metodo puede ser 
combinado con otros para construir referencias mas especfficas. Retorna solo el primer 
elemento encontrado. 

querySelectorAII(selectores) Este metodo es similar a querySelector () pero retorna 
todos los elementos que concuerdan con los selectores especificados. 

Eventos 

La relevancia de los eventos en las aplicaciones web motivo la estandarizacion de metodos 
ya disponibles en navegadores lideres. 

addEventListener(evento, manejador, captura) Este metodo es usado para agregar una 
escucha para un evento. El metodo recibe tres valores: el nombre del evento, la funcion 
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que respondera al evento, y un valor booleano (verdadero o falso) que indica el orden de 
ejecucion de varios eventos disparados al mismo tiempo. Normalmente el tercer atributo 
es configurado como false. 

removeEventListener(evento, manejador, captura) Este metodo es usado para remover 
una escucha para un evento, desactivando el manejador. Los valores necesarios son los 
mismos que los usados para addEventListener (). 

APIs 

El alcance de Javascript ha sido expandido con un grupo de poderosas librerias accesibles 

a traves de interfaces llamadas APIs. 

Canvas Esta API es una API de dibujo, especifica para la creacion y manipulacion de 
graficos. Utiliza metodos Javascript predefinidos para operar. 

Drag and Drop Esta API hace que arrastrar y soltar elementos con el raton en la pantalla 
sea posible tambien en la web. 

Geolocation Esta API tiene la intencion de proveer acceso a informacion correspondiente 
con la ubicacion fisica del dispositivo que esta accediendo a la aplicacion. Puede 
retornar datos como la latitud y longitud utilizando diferentes mecanismos (como 
informacion de la red o GPS). 

Web Storage Esta API introduce dos atributos para almacenar datos en el ordenador del 
usuario: sessionStorage y localStorage. El atributo sessionStorage permite 
a los desarrolladores hacer un seguimiento de la actividad de los usuarios 
almacenando informacion que estara disponible en cada instancia de la aplicacion 
durante la duracion de la sesion. El atributo localStorage, por otro lado, ofrece a los 
desarrolladores un area de almacenamiento, creada para cada aplicacion, que puede 
conservar varios megabytes de informacion, preservando de este modo informacion y 
datos en el ordenador del usuario de forma persistente. 

Indexed Database Esta API agrega la capacidad de trabajar con bases de datos del lado del 
usuario. El sistema fue desarrollado independientemente de previas tecnologias y 
provee una base de datos destinada a aplicaciones web. La base de datos es 
almacenada en el ordenador del usuario, los datos son persistentes y, por supuesto, 
son exclusivos de la aplicacion que los creo. 

File Este es un grupo de APIs desarrollada para proveer la capacidad de leer, escribir y 
procesar archivos de usuario. 

XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a 
la construction de aplicaciones Ajax. Incluye nuevos metodos para controlar el 
progreso de la operation y realizar solicitudes cruzadas (desde diferentes origenes). 

Cross Document Messaging Esta API introduce una nueva tecnologia de comunicacion 
que permite a aplicaciones comunicarse entre si a traves de diferentes cuadros o 
ventanas. 
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WebSockets Esta API provee un mecanismo de comunicacion de dos vias entre clientes y 
servidores para generar aplicaciones en tiempo real como salas de chat o juegos en 
linea. 

Web Workers Esta API potencia Javascript permitiendo el procesamiento de codigo detras 
de escena, de forma separada del codigo principal, sin interrumpir la actividad normal 
de la pagina web, incorporando la capacidad de multitarea a este lenguaje. 

History Esta API provee la alternativa de incorporar cada paso en el proceso de una 
aplicacion dentro del historial de navegacion del navegador. 

Offline Esta API apunta a mantener las aplicaciones funcionales incluso cuando el 
dispositivo es desconectado de la red. 
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Capitulo 5 

Video y audio 

5.1 Reproduciendo video con HTML5 

Una de las caracterfsticas mas mencionadas de HTML5 fue la capacidad de procesar video. 
El entusiasmo nada tenia que ver con las nuevas herramientas provistas por HTML5 para 
este proposito, sino mas bien con el hecho de que desde los videos se volvieron una pieza 
esencial de Internet, todos esperaban soporte nativo por parte de los navegadores. Era 
como que todos conocfan la importancia de los videos excepto aquellos encargados de 
desarrollar las tecnologfas para la web. 

Pero ahora que ya disponemos de soporte nativo para videos e incluso un estandar 
que nos permitira crear aplicaciones de procesamiento de video compatibles con 
multiples navegadores, podemos comprender que la situacion era mucho mas complicada 
de lo que nos habiamos imaginado. Desde codificadores hasta consumo de recursos, las 
razones para no implementar video de forma nativa en los navegadores eran mucho mas 
complejas que los codigos necesarios para hacerlo. 

A pesar de estas complicaciones, HTML5 finalmente introdujo un elemento para 
insertar y reproducir video en un documento HTML. El elemento <video> usa etiquetas 
de apertura y cierre y solo unos pocos parametros para lograr su funcion. La sintaxis es 
extremadamente sencilla y solo el atributo src es obligatorio: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Video</title> 

</head> 

<body> 

<section id="reproductor"> 

<video src="http://minkbooks.com/content/trailer.mp4" controls> 
</video> 

</section> 

</html> 


Listado 5-1. Sintaxis basica para el elemento <video>. 
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En teoria, el codigo del Listado 5-1 deberfa ser mas que suficiente. Repito, en teorfa. 
Pero como explicamos anteriormente, las cosas se vuelven un poco mas complicadas en la 
vida real. Primero debemos proveer al menos dos archivos diferentes con formatos de 
video diferentes: OGG y MP4. Esto es debido a que a pesar de que el elemento <video> y 
sus atributos son estandar, no existe un formato estandar de video. Primero, algunos 
navegadores soportan un codificador de video que otros no, y segundo el codificador 
utilizado en el formato MP4 (el unico soportado por importantes navegadores como Safari 
e Internet Explorer) se encuentra bajo licencia comercial. 

Los formatos OGG y MP4 son contenedores de video y audio. OGG contiene 
codificadores de video Theora y de audio Vorbis, y los disponibles para el contenedor MP4 
son H.264 para video y AAC para audio. En este momenta OGG es reconocido por Firefox, 
Google Chrome y Opera, mientras que MP4 trabaja en Safari, Internet Explorer y tambien 
Google Chrome. 

El elemento <video> 

Intentemos ignorar por un momenta estas complicaciones y disfrutar de la simplicidad del 
elemento <video>. Este elemento ofrece varios atributos para establecer su 
comportamiento y configuracion. Los atributos width y height, al igual que en otros 
elementos HTML ya conocidos, declaran las dimensiones para el elemento o ventana del 
reproductor. El tamano del video sera automaticamente ajustado para entrar dentro de 
estos valores, pero no fueron considerados para redimensionar el video sino limitar el 
area ocupada por el mismo para mantener consistencia en el diseno. El atributo src 
especifica la fuente del video. Este atributo puede ser reemplazado por el elemento 
<source> y su propio atributo src para declarar varias fuentes con diferentes formatos, 
como en el siguiente ejemplo: 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Reproductor de Video</title> 

</head> 

<body> 

<section id="reproductor"> 

<video id="medio" width="720" height="400" controls> 

<source src="http://minkbooks.com/content/trailer.mp4"> 
<source src="http://minkbooks.com/content/trailer.ogg"> 
</video> 

</section> 

</body> 

</html> 


Listado 5-2. Reproductor de video con controles por defecto y compatible con navegadores HTML5. 
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En el Listado 5-2, el elemento <video> fue expandido. Ahora, dentro de las etiquetas 
del elemento hay dos elementos <source>. Estos nuevos elementos proveen diferentes 
fuentes de video para que los navegadores puedan elegir. El navegador leera la etiqueta 
<source> y decidira cual archivo reproducir de acuerdo a los formatos soportados (MP4 
u OGG). 


Hagalo usted mismo: Cree un nuevo archivo HTMLvacio con el nombre video.html 
(o cualquier otro nombre que desee), copie el codigo del Listado 5-2, y abra el archivo 
en diferentes navegadores para comprobar el modo en que el elemento <video> 
trabaja en cada uno de ellos. 

Atributos para <video> 

Incluimos un atributo en la etiqueta <video> en los Listados 5-1 y 5-2 que probablemente 
llamo su atencion. El atributo controls es uno de varios atributos disponibles para este 
elemento. Este, en particular, muestra controles de video provistos por el navegador por 
defecto. Cuando el atributo esta presente cada navegador activara su propia interface, 
permitiendo al usuario comenzar a reproducir el video, pausarlo o saltar hacia un cuadro 
especifico, entre otras funciones. 

Junto con controls, tambien podemos usar los siguientes: 

autoplay Cuando este atributo esta presente, el navegador comenzara a reproducir el 
video automaticamente tan pronto como pueda. 
loop Si este atributo es especificado, el navegador comenzara a reproducir el video 
nuevamente cuando llega al final. 

poster Este atributo es utilizado para proveer una imagen que sera mostrada mientras 
esperamos que el video comience a ser reproducido. 
preload Este atributo puede recibir tres valores distintos: none, metadata o auto. El 
primero indica que el video no deberia ser cacheado, por lo general con el proposito 
de minimizar trafico innecesario. El segundo valor, metadata, recomendara al 
navegador que trate de capturar informacion acerca de la fuente (por ejemplo, 
dimensiones, duracion, primer cuadro, etc...). El tercer valor, auto, es el valor 
configurado por defecto que le sugerira al navegador descargar el archivo tan pronto 
como sea posible. 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Reproductor de Video</title> 
</head> 

<body> 

<section id="reproductor"> 
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<video id="medio" width="720" height="400" preload controls 
loop poster="http://minkbooks.com/content/poster.jpg"> 
<source src="http://minkbooks.com/content/trailer.mp4"> 

<source src="http://minkbooks.com/content/trailer.ogg"> 
</video> 

</section> 

</body> 

</html> 


Listado 5-3: Aprovechando los atributos del elemento <video>. 

En el Listado 5-3, el elemento <video> fue poblado con atributos. Debido a las 
diferencias en comportamiento entre un navegador y otro, algunos atributos estaran 
habilitados o deshabilitados por defecto, y algunos de ellos incluso no trabajaran en 
algunos navegadores o bajo determinadas circunstancias. Para obtener un control 
absoluto sobre el elemento <video> y el medio reproducido, deberemos programar 
nuestro propio reproductor de video en Javascript aprovechando los nuevos metodos, 
propiedades y eventos incorporados en HTML5. 


5.2 Programando un reproductor de video 

Si ha probado los anteriores codigos en diferentes navegadores, seguramente habra 
notado que los disenos graficos de los controles del reproductor difieren de uno a otro. 
Cada navegador tiene sus propios botones y barras de progreso, e incluso sus propias 
funciones. Esta situacion puede ser aceptable en algunas circunstancias pero en un 
ambiente profesional, donde cada detalle cuenta, resulta absolutamente necesario que un 
diseno consistente sea preservado a traves de dispositivos y aplicaciones, y tambien 
disponer de un control absoluto sobre todo el proceso. 

HTML5 proporciona nuevos eventos, propiedades y metodos para manipular video e 
integrarlo al documento. De ahora en mas, podremos crear nuestro propio reproductor de 
video y ofrecer las funciones que queremos usando HTML, CSS y Javascript. El video es 
ahora parte integral del documento. 

El diseno 

Todo reproductor de video necesita un panel de control con al menos algunas funciones 
basicas. En la nueva plantilla del Listado 5-4, un elemento <nav> fue agregado luego de 
<video>. Este elemento <nav> contiene dos elementos <div> (botones y barra) para 
ofrecer un boton "Reproducir" y una barra de progreso. 


<!DOCTYPE html> 
<html lang="es"> 
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<title>Reproductor de Video</title> 

<link rel="stylesheet" href="reproductor.css"> 

<script src="reproductor.js"></script> 

</head> 

<body> 

<section id="reproductor"> 

<video id="medio" width="720" height="400"> 

<source src="http://minkbooks.com/content/trailer.mp4"> 

<source src="http://minkbooks.com/content/trailer.ogg"> 
</video> 

<nav> 

<div id="botones"> 

<button type="button" id="reproducir">Reproducir</button> 
</div> 

<div id="barra"> 

<div id="progreso"></div> 

</div> 

<div style="clear: both"x/div> 

</section> 

</html> 


Listado 5-4. Plantilla HTML para nuestro reproductor de video. 

Ademas del video, esta plantilla tambien incluye dos archivos para acceder a codigos 
externos. Uno de ellos es player. css para los siguientes estilos CSS: 


text-align: center; 

} 

header, section, footer, aside, nav, article, figure, figcaption, 

hgroup{ 

display : block; 

} 

ftreproductor{ 
width: 720px; 
margin: 20px auto; 
padding: 5px; 
background: #999999; 
border: lpx solid #666666; 

-moz-border-radius: 5px; 

-webkit-border-radius: 5px; 
border-radius: 5px; 

} 

nav{ 

margin: 5px Opx; 
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#botones{ 

float: left; 
width: lOOpx; 
height: 2 0px; 

} 

#barra{ 

position: relative; 
float: left; 
width: 600px; 
height: 16px; 
padding: 2px; 

border: lpx solid #CCCCCC; 
background: #EEEEEE; 

} 

#progreso{ 

position: absolute; 
width: Opx; 
height: 16px; 

background: rgba(0,0,150,.2); 

} 


Listado 5-5. Estilos CSS para el reproductor. 

El codigo del Listado 5-5 usa tecnicas del Modelo de Caja Tradicional estudiado en el 
Capitulo 2 para crear la caja que contiene cada pieza del reproductor de video y ubicarla en 
el centro de la ventana. No hay nuevas propiedades o sorpresas en este codigo, es solo un 
grupo de propiedades CSS ya estudiadas y conocidas para proveer estilos a los elementos del 
reproductor. Sin embargo, existen dos propiedades que pueden resultar inusuales. La 
propiedad position, conocida por viejos programadores CSS, fue usada para superponer 
un elemento sobre otro (barra y progreso). Y la propiedad width, para el elemento 
<div> identificado como progreso, fue inicializada en 0. Esto se debe a que el elemento 
sera utilizado para simular una barra de progreso que cambiara de tamano a medida que el 
video es reproducido, y que, por supuesto, comenzara a crecer desde o. 

Hagalo usted mismo: Copie la nueva plantilla del Listado 5-4 en el archivo HTML 
(video.html). Cree dos nuevos archivos vacios para los estilos CSS y el codigo 
Javascript. Estos archivos deberian ser llamados reproductor. css y 
reproductor.js respectivamente. Copie el codigo del Listado 5-5 dentro del 
archivo correspondiente y luego haga lo mismo para cada codigo Javascript listado de 
ahora en adelante. 

El codigo 

Es momenta de escribir el codigo Javascript para nuestro reproductor. Existen diferentes 
formas de programar un reproductor de video, pero en este capitulo vamos solo a explicar 
como aplicar los necesarios eventos, metodos y propiedades para procesamiento basico 
de video. El resto quedara librado a su imaginacion. 
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Para nuestro proposito, vamos a trabajar con unas pocas funciones simples que nos 
permitiran reproduciry pausar el video, mostrar una barra de progreso mientras el video 
es reproducido y ofrecer la opcion de hacer clic sobre esta barra para adelantar o 
retroceder el video. 

Los eventos 

HTML5 incorpora nuevos eventos que son especificos de cada API. Para el procesamiento 
de video y audio, por ejemplo, los eventos fueron incorporados con el objetivo de 
informar sobre la situacion del medio (el progreso de la descarga, si la reproduccion del 
medio finalizo, o si la reproduccion del medio es comenzada o pausada, entre otras). No 
vamos a utilizarlos en nuestros ejemplos pero seran necesarios para construir aplicaciones 
complejas. Estos son los mas relevantes: 

progress Este evento es disparado periodicamente para informar acerca del progreso de la 
descarga del medio. La informacion estara disponible a traves del atributo buffered, 
como veremos mas adelante. 

canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido 
sin interrupcion. El estado es establecido considerando la actual tasa de descarga y 
asumiendo que seguira siendo la misma durante el resto del proceso. Existe otro evento 
mas para este proposito, canplay, pero no considera toda la situacion y es disparado 
tan pronto como algunas partes del medio se encuentran disponibles (luego de 
descargar los primeros cuadros de un video, por ejemplo). 
ended Es disparado cuando el reproductor llega al final del medio, 
pause Es disparado cuando el reproductor es pausado. 
play Es disparado cuando el medio comienza a ser reproducido. 

error Este evento es disparado cuando ocurre un error. Es relacionado con el elemento 
<source> correspondiente a la fuente del medio que produjo el error. 

Para nuestro reproductor de ejemplo solo vamos a escuchar a los habituales eventos 
click yload. 

IMPORTANTE: Eventos, metodos y propiedades para APIs estan aun en proceso de 
desarrollo. En este libro vamos a estudiar solo aquellos que consideramos 
relevantes e indispensables para nuestros ejemplos. Para ver como la 
especificacion esta progresando con respecto a esto, visite nuestro sitio web y siga 
los enlaces correspondientes a cada capitulo. 


function iniciarO { 
maximo=600; 

medio=document.getElementById('medio'); 
reproducir=document. getElementByld ( ' reproducir ' ) ,- 
barra=document.getElementByld('barra'); 


111 



El gran libro de HTML5, CSS3 y Javascript 


progreso=document.getElementByld('progreso'); 

reproducir.addEventListener('click', presionar, false); 
barra.addEventListener( 1 click 1 , mover, false); 

} 


Listado 5-6. Funcion initial. 

El Listado 5-6 presenta la primera funcion de nuestro reproductor de video. La funcion 
fue llamada iniciar debido a que sera la funcion que iniciara la ejecucion de la 
aplicacion tan pronto como el documento sea completamente cargado. 

Debido a que esta es la primera funcion a ser ejecutada, necesitamos definir unas 
variables globales para configurar nuestro reproductor. Usando el selector 
getElementByld creamos una referencia a cada uno de los elementos del reproductor 
para poder acceder a ellos en el resto del codigo mas adelante. Tambien declaramos la 
variable maximo para conocer siempre el maximo tamano posible para la barra de 
progreso (600 pixeles). 

Hay dos acciones a las que tenemos que prestar atencion desde el codigo: cuando el 
usuario hace clic sobre el boton "Reproducir" y cuando hace clic sobre la barra de 
progreso para avanzar o retroceder el video. Dos escuchas para el evento click fueron 
agregadas con el proposito de controlar estas situaciones. Primero agregamos la escucha 
al elemento reproducir que ejecutara la funcion presionar () cada vez que el usuario 
haga clic sobre el boton "Reproducir". La otra escucha es para el elemento barra. En este 
caso, la funcion mover () sera ejecutada cada vez que el usuario haga clic sobre la barra 
de progreso. 

Los metodos 

La funcion presionar () incorporada en el Listado 5-7 es la primera funcion que realmente 
realiza una tarea. Esta funcion ejecutara de acuerdo a la situacion actual dos metodos 
especificos de esta API: playOy pause 0: 


function presionar(){ 

if(!medio.paused && Imedio.ended) { 
medio.pause(); 

reproducir.innerHTML= 1 Reproducir'; 
window.clearlnterval(bucle); 

}else{ 

medio.play(); 

reproducir.innerHTML= 1 Pausa 1 ; 
bucle=setlnterval(estado, 1000) ; 



Listado 5-7. Esta funcion initia y pausa la reproduction del video. 


112 



Video y audio 


Los metodos playO y pause () son parte de una lista de metodos incorporados por 
HTML5 para procesamiento de medios. Los siguientes son los mas relevantes: 

play() Este metodo comienza a reproducir el medio desde el inicio, a menos que el medio 
haya sido pausado previamente. 
pause()Este metodo pausa la reproduction. 

load{)Este metodo carga el archivo del medio. Es util en aplicaciones dinamicas para 
cargar el medio anticipadamente. 

canPlayType(formato) Con este metodo podemos saber si el formato del archivo es soportado 
por el navegador o no. 

Las propiedades 

La funcion presionarO tambien usa unas pocas propiedades para recabar informacion 
sobre el medio. Las siguientes son las mas relevantes: 

paused Esta propiedad retorna true (verdadero) si la reproduction del medio esta 
actualmente pausada o no a comenzado. 

ended Esta propiedad retorna true (verdadero) si la reproduction del medio ha finalizado 
porque se llego al final. 

duration Esta propiedad retorna la duracion del medio en segundos. 
currentTime Esta es una propiedad que puede retornar o recibir un valor para informar 
sobre la posicion en la cual el medio esta siendo reproducido o especifica una nueva 
posicion donde continuar reproduciendo. 
error Esta propiedad retorna el valor del error ocurrido. 

buffered Esta propiedad ofrece informacion sobre la parte del archivo que ya fue cargada 
en el buffer. Nos permite crear un indicador para mostrar el progreso de la descarga. 
La propiedad es usualmente leida cuando el evento progress es disparado. Debido a 
que los usuarios pueden forzar al navegador a cargar el medio desde diferentes 
posiciones en la linea de tiempo, la informacion retornada por buffered es un array 
conteniendo cada parte del medio que ya fue descargada, no solo la que comienza 
desde el principio. Los elementos del array son accesibles por medio de los atributos 
end() y start (). Por ejemplo, el codigo buffered.end(0) retornara la duracion en 
segundos de la primera porcion del medio encontrada en el buffer. Esta propiedad y 
sus atributos estan bajo desarrollo en este momento. 

El codigo en operation 

Ahora que ya conocemos todos los elementos involucrados en el procesamiento de video, 
echemos un vistazo a como trabaja la funcion presionar (). 

Esta funcion es ejecutada cuando el usuario presiona el boton "Reproducir" en nuestro 
reproductor. Este boton tendra dos propositos: mostrara el mensaje "Reproducir" para 
reproducir el video o "Pausa" para detenerlo, de acuerdo a las circunstancias. Por lo tanto, 
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cuando el video fue pausado o no comenzo, presionar este boton comenzara o continuara 
la reproduccion. Lo opuesto ocurrira si el video esta siendo reproducido, entonces 
presionar el boton pausara el video. 

Para lograr esto el codigo detecta la situacion del medio comprobando el valor de las 
propiedades paused y ended. En la primera linea de la funcion tenemos un condicional 
if para este proposito. Si el valor de medio.paused y medio.ended es falso, significara 
que el video esta siendo reproducido, entonces el metodo pause 0 es ejecutado para 
pausar el video y el texto del boton es cambiado a "Reproducir" usando innerHTML. 

Si lo opuesto ocurre, el video fue pausado previamente o termino de ser reproducido, 
entonces la condicion sera falsa (medio.paused o medio.ended es verdadero) y el metodo 
playO es ejecutado para comenzar o restaurar la reproduccion del video. En este caso 
tambien realizamos una importante accion que es configurar un intervalo usando 
setinterval () para ejecutar la funcion estado () una vez por segundo de ahora en mas. 


function estado(){ 
if(!medio.ended){ 

var total=parseInt(medio.currentTime*maximo/medio.duration); 
progreso.style.width=total+'px'; 

}else{ 

progreso.style.width= 1 Opx 1 ; 
reproducir.innerHTML= 1 Reproducir'; 
window.clearlnterval(bucle); 

} 


Listado 5-8. Esta funcion actualiza la barra de progreso una vez por segundo. 

La funcion estado () en el Listado 5-8 es ejecutada cada segundo mientras el video es 
reproducido. Tambien utilizamos un condicional if en esta funcion para controlar el 
estado del video. Si la propiedad ended retorna falso, calculamos que tan larga la barra de 
progreso debe ser en pixeles y asignamos el valor al elemento <div> que la representa. 
En caso de que la propiedad sea verdadera (lo cual significa que la reproduccion del video 
ha terminado), retornamos el valor de la barra de progreso a 0 pixeles, cambiamos el 
boton a "Reproducir", y cancelamos el intervalo usando clearlnterval. En este caso la 
funcion estado 0 no sera ejecutada nunca mas. 

Volvamos unos pasos para estudiar como calculamos el tamano de la barra de progreso. 
Debido a que la funcion estado 0 sera ejecutada cada segundo mientras el video se esta 
reproduciendo, el valor del tiempo en el que el video se encuentra cambiara constantemente. 
Este valor en segundos es obtenido de la propiedad currentTime. Tambien contamos con el 
valor de la duracion del video en la propiedad duration, y el maximo tamano de la barra de 
progreso en la variable maximo que definimos al principio. Con estos tres valores podemos 
calcular cuantos pixeles de largo la barra deberia ser para representar los segundos ya 
reproducidos. La formula tiempo actual x maximo / duracion total transformara los 
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segundos en pixeles para cambiar el tamano del elemento <div> que representa la barra de 
progreso. 

La funcion para responder al evento click del elemento reproducir (el boton) ya 
fue creada. Ahora es tiempo de hacer lo mismo para responder a los dies hechos sobre la 
barra de progreso: 


function mover(e){ 

if(!medio.paused && !medio.ended){ 
var ratonX=e.pageX-barra.offsetLeft; 
var nuevoTiempo=ratonX*medio.duration/maximo; 
medio.currentTime=nuevoTiempo; 
progreso.style.width=ratonX+ 1 px'; 

} 

} 


Listado 5-9. Comenzar a reproducir desde la posicion seleccionada por el usuario. 

Una escucha para el evento click fue agregada al elemento barra para responder 
cada vez que el usuario quiera comenzar a reproducir el video desde una nueva posicion. 
La escucha usa la funcion mover () para responder al evento cuando es disparado. Puede 
ver esta funcion en el Listado 5-9. Comienza con un if, al igual que las anteriores 
funciones, pero esta vez el objetivo es controlar que la accion se realice solo cuando el 
video esta siendo reproducido. Si las propiedades paused y ended son falsas significa que 
el video esta siendo reproducido y el codigo tiene que ser ejecutado. 

Debemos hacer varias cosas para calcular el tiempo en el cual el video deberfa 
comenzar a ser reproducido. Necesitamos determinar cual era la posicion del raton 
cuando el clic sobre la barra fue realizado, cual es la distancia en pixeles desde esa 
posicion hasta el comienzo de la barra de progreso y cuantos segundos esa distancia 
representa en la Ifnea de tiempo. 

Los procesos para agregar una escucha (o registrar un evento), tales como 
addEventListener (), siempre envian un valor que hacer referencia al evento. Esta 
referencia es enviada como un atributo a la funcion que responde al evento. 
Tradicionalmente la variable e es usada para almacenar este valor. En la funcion del Listado 
5-9 usamos esta variable y la propiedad pagex para capturar la posicion exacta del puntero 
del raton al momento en el que el clic fue realizado. El valor retornado por pagex es relativo 
a la pagina, no a la barra de progreso o la ventana. Para saber cuantos pixeles hay desde el 
comienzo de la barra de progreso y la posicion del puntero, tenemos que substraer el 
espacio entre el lado izquierdo de la pagina y el comienzo de la barra. Recuerde que la barra 
esta localizada en una caja que se encuentra centrada en la ventana. Los valores dependeran 
de cada situacion en particular, por lo tanto supongamos que la barra esta localizada a 421 
pixeles del lado izquierdo de la pagina web y el clic fue realizado en el medio de la barra. 
Debido a que la barra tiene una longitud de 600 pixeles, el clic fue hecho a 300 pixeles desde 
el comienzo de la barra. Sin embargo, la propiedad pagex no retornara el valor 300, sino 
721. Para obtener la posicion exacta en la barra donde el clic ocurrio, debemos substraer de 
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pagex la distancia desde el lado izquierdo de la pagina hasta el comienzo de la barra (en 
nuestro ejemplo, 421 pixeles). Esta distancia puede ser obtenida mediante la propiedad 
offsetLeft. Entonces, usando la formula e.pagex - barra.offsetLeft conseguimos 
exactamente la posicion del puntero del raton relativa al comienzo de la barra. En nuestro 
ejemplo, la formula en numeros serfa: 721 - 421 = 300. 

Una vez obtenido este valor, debemos convertirlo a segundos. Usando la propiedad 
duration, la posicion exacta del puntero del raton en la barra y el tamano maximo de la 
barra construimos la formula ratonx x video.duration / maximo y almacenamos el 
resultado dentro de la variable nuevoTiempo. Este resultado es el tiempo en segundos 
que la posicion del puntero del raton representa en la linea de tiempo. 

El siguiente paso es comenzar a reproducir el video desde la nueva posicion. La 
propiedad currentTime, como ya mencionamos, retorna la posicion actual del video en 
segundos pero tambien avanza o retrocede el video a un tiempo especifico si un nuevo 
valor le es asignado. Con el codigo medio.currentTime=nuevoTiempo movemos el 
video a la posicion deseada. 

Lo unico que resta por hacer es cambiar el tamano del elemento progreso para reflejar 
en pantalla la nueva situation. Utilizando el valor de la variable ratonx cambiamos el 
tamano del elemento para alcanzar exactamente la posicion done el clic fue hecho. 

El codigo para nuestro reproductor de video ya esta casi listo. Tenemos todos los 
eventos, metodos, propiedades y funciones que nuestra aplicacion necesita. Solo hay una 
cosa mas que debemos hacer, un evento mas que debemos escuchar para poner nuestro 
codigo en marcha: 


window.addEventListener( 1 load', iniciar, false); 


Listado 5-10. Escuchando al evento load. 

Podnamos haber usado la tecnica window.onload para registrar el manejador del 
evento, y de hecho hubiese sido la mejor option para hacer nuestros codigos compatibles 
con viejos navegadores. Sin embargo, debido a que este libro es acerca de HTML5, 
decidimos usar el nuevo estandar addEventListener (). 

Hagalo usted mismo: Copie todos los codigos Javascript desde el Listado 5-6 dentro 
del archivo reproductor. js. Abra el archivo video.html con la plantilla del 
Listado 5-4 en su navegador y haga clic en el boton "Reproducir". Intente utilizar la 
aplicacion desde diferentes navegadores. 


5.3 Formatos de video 

Por el momento no existe un estandar para formatos de video y audio en la web. Existen 
varios contenedores y diferentes codificadores disponibles, pero ninguno fue totalmente 
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adoptado y no hay consenso alguno de parte de los fabricantes de navegadores para 
lograr un estandar en el futuro cercano. 

Los contenedores mas comunes son OGG, MP4, FLV y el nuevo propuesto por Google, 
WEBM. Normalmente estos contenedores contienen video codificado con los 
codificadores Theora, H.264, VP6 o VP8, respectivamente. Esta es la lista de los mas 
usados: 


• OGG codificador de video Theora y audio Vorbis. 

• MP4 codificador de video H.264 y audio AAC. 

• FLV codificador de video VP6 y audio MP3. Tambien soporta H.264 y AAC. 

• WEBM codificador de video VP8 y audio Vorbis. 

Los codificadores utilizados para OGG y WEBM son gratuitos, pero los utilizados para 
MP4 y FLV estan patentados, lo que significa que si queremos usar MP4 o FLV para 
nuestras aplicaciones deberemos pagar. Algunas restricciones son anuladas para 
aplicaciones gratuitas. 

El tema es que en este momento Safari e Internet Explorer no soportan la tecnologia 
gratuita. Ambos solo trabajan con MP4 y solo Internet Explorer anuncio la inclusion del 
codificador VP8 en el futuro. Esta es la lista de los navegadores mas populares: 

• Firefox codificador de video Theora y audio Vorbis. 

• Google Chrome codificador de video Theora y audio Vorbis. Tambien soporta 
codificador de video H.264 y audio AAC. 

• Opera codificador de video Theora y audio Vorbis. 

• Safari codificador de video H.264 y audio AAC. 

• Internet Explorer codificador de video H.264 y audio AAC. 

Un mayor soporte para el formato WEBM en el futuro podria mejorar la situacion, 
pero probablemente no habra un formato estandar por al menos los proximos dos o tres 
anos y tendremos que considerar diferentes alternativas de acuerdo a la naturaleza de 
nuestra aplicacion y nuestro negocio. 


5.4 Reproduciendo audio con HTML5 

Audio no es un medio tan popular como video en Internet. Podemos filmar un video con 
una camara personal que generara millones de vistas en sitios web como 
www.youtube.com, pero crear un archivo de audio que obtenga el mismo resultado es 
practicamente imposible. Sin Embargo, el audio se encuentra aun disponible, ganando su 
propio mercado en shows de radio y podcasts en toda la red. 

HTML5 provee un nuevo elemento para reproducir audio en un documento HTML. El 
elemento, por supuesto, es <audio> y comparte casi las mismas caracteristicas del 
elemento <video>. 
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<!DOCTYPE html> 
chtml lang="es"> 

<title>Reproductor de Audio</title> 

</head> 

<body> 

<section id="reproductor"> 

<audio src="http://minkbooks.com/content/beach.mp3" controls> 
</audio> 

</section> 

</body> 

</html> 


Listado 5-11. HTML basico para reproducir audio. 


El elemento <audio> 

El elemento <audio> trabaja del mismo modo y comparte varios atributos con el 
elemento <video>: 

src Este atributo especifica la URL del archivo a ser reproducido. Al igual que en el elemento 
<video> normalmente sera reemplazado por el elemento <source> para ofrecer 
diferentes formatos de audio entre los que el navegador pueda elegir. 
controls Este atributo activa la interface que cada navegador provee por defecto para 
controlar la reproduccion del audio. 

autoplay Cuando este atributo esta presente, el audio comenzara a reproducirse 
automaticamente tan pronto como sea posible. 
loop Si este atributo es especificado, el navegador reproducira el audio una y otra vez de 
forma automatica. 

preload Este atributo puede tomar tres valores diferentes: none, metadata o auto. El 
primero indica que el audio no deberfa ser cacheado, normalmente con el proposito 
de minimizar trafico innecesario. El segundo valor, metadata, recomendara al 
navegador obtener informacion sobre el medio (por ejemplo, la duracion). El tercer 
valor, auto, es el valor configurado por defecto y le aconseja al navegador descargar el 
archivo tan pronto como sea posible. 

Una vez mas debemos hablar acerca de codificadores, y otra vez debemos decir que el 
codigo en el Listado 5-11 deberfa ser mas que suficiente para reproducir audio en nuestro 
documento, pero no lo es. MP3 esta bajo licencia comercial, por lo que no es soportado 
por navegadores como Firefox u Opera. Vorbis (el codificador de audio del contenedor 
OGG) es soportado por esos navegadores, pero no por Safari e Internet Explorer. Por esta 
razon, nuevamente debemos aprovechar el elemento <source> para proveer al menos 
dos formatos entre los cuales el navegador pueda elegir: 
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<!DOCTYPE html> 
chtml lang="es"> 

<title>Reproductor de Audio</title> 

</head> 

<body> 

<section id="reproductor"> 

<audio id="medio" controls> 

<source src="http://minkbooks.com/content/beach.mp3"> 
<source src="http://minkbooks.com/content/beach.ogg"> 
</audio> 

</section> 

</html> 


Listado 5-12: dosfuentes para el mismo audio 

El codigo en el Listado 5-12 reproducira musica en todos los navegadores utilizando los 
controles por defecto. Aquellos que no puedan reproducir MP3 reproduciran OGG y 
viceversa. Recuerde que MP3, al igual que MP4 para video, tienen uso restringido por 
licencias comerciales, por lo que solo podemos usarlos en circunstancias especiales, de 
acuerdo con lo determinado por cada licencia. 

El soporte para los codificadores de audio libres y gratuitos (como Vorbis) se esta 
expandiendo, pero llevara tiempo transformar este formato desconocido en un estandar. 

5.5 Programando un reproductor de audio 

La API para medios fue desarrollada tanto para video como para audio. Cada evento, 
metodo y propiedad incorporada para video funcionara tambien con audio. Debido a esto, 
solo necesitamos reemplazar el elemento <video> por el elemento <audio> en nuestra 
plantilla e instantaneamente obtenemos un reproductor de audio: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Reproductor de Audio</title> 

clink rel="stylesheet" href="reproductor.css"> 

<script src = "reproductor.j s"></script> 

</head> 

<body> 

csection id="reproductor"> 

caudio id="medio"> 

csource src="http://minkbooks.com/content/beach.mp3"> 
csource src="http://minkbooks.com/content/beach.ogg"> 
</audio> 
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<div id="botones"> 

<button type="button" id="reproducir">Reproducir</button> 
</div> 

<div id="barra"> 

<div id="progreso"></div> 

</div> 

<div style="clear: both"x/div> 

</section> 

</body> 

</html> 


Listado 5-13. Plantilla para el reproductor de audio. 

En la nueva plantilla del listado 5-13, solo incorporamos un elemento <audio> y sus 
fuentes correspondientes, dejando el resto del codigo intacto, incluyendo los archivos 
externos. No necesitamos cambiar nada mas, los eventos, metodos y propiedades son los 
mismos para los dos medios (audio y video). 

Hagalo usted mismo: Cree un nuevo archivo llamado audio.html, copie el 
codigo del Listado 5-13 dentro de este archivo y abralo en su navegador. Use los 
mismos archivos reproductor.css y reproductor. js creados anteriormente 
para hacer funcionar su reproductor de audio. 

5.6 Referencia rapida 

Video y audio son parte esencial de la web. HTML5 incorpora todos los elementos 
necesarios para aprovechar estas herramientas y utilizarlas en nuestras aplicaciones web. 

Elementos 

HTML5 provee dos nuevos elementos HTML para procesar medios y una API espedfica 
para acceder a la libreria de medios. 

<video> Este elemento nos permite insertar un archivo de video en un documento HTML. 
<audio> Este elemento nos permite insertar un archivo de audio en un documento HTML. 

Atributos 

La especificacion tambien provee atributos para los elementos <video> y <audio>: 

src Este atributo declara la URL del medio a ser incluido en el documento. Puede usar el 
elemento <source> para proveer mas de una fuente y dejar que el navegador elija 
cual reproducir. 
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controls Este atributo, si esta presente, activa los controles por defecto. Cada navegador 
provee sus propias funciones, como botones para reproducir y pausar el medio, asi 
como barra de progreso, entre otras. 

autoplay Este atributo, si esta presente, le indicara al navegador que comience a 
reproducir el medio lo mas pronto posible. 
loop Este atributo hara que el navegador reproduzca el medio indefinidamente. 
preload Este atributo recomienda al navegador que hacer con el medio. Puede recibir tres 
valores diferentes: none, metadata y auto. El valor none le dice al navegador que no 
descargue el archivo hasta que el usuario lo ordene. El valor metadata le recomienda 
al navegador descargar informacion basica sobre el medio. El valor auto le dice al 
navegador que comience a descargar el archivo tan pronto como sea posible. 

Atributos de video 

Existen algunos atributos que son especlficos para el elemento <video>: 

poster Este atributo provee una imagen para mostrarla en lugar del video antes de ser 
reproducido. 

width Este atributo determina el tamano del video en pixeles. 
height Este atributo determina el tamano del video en pixeles. 

Eventos 

Los eventos mas relevantes para esta API son: 

progress Este evento es disparado periodicamente para informar el progreso en la descarga 
del medio. 

canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido 
sin interrupcion. 

canplay Este evento es disparado cuando el medio puede ser reproducido. A diferencia del 
evento previo, este es disparado cuando solo parte del archivo fue descargado (solo 
los primeros cuadros de un video, por ejemplo). 
ended Este evento es disparado cuando la reproduccion Mega al final del medio, 
pause Este evento es disparado cuando la reproduccion es pausada. 
play Este evento es disparado cuando el medio comienza a ser reproducido. 
error Este evento es disparado cuando ocurre un error. El evento es despachado desde el 
elemento <source> (si se encuentra presente) correspondiente a la fuente del medio 
que produjo el error. 

Metodos 

Los metodos mas comunes para esta API son: 

play() Este metodo comienza o continua la reproduccion del medio. 


121 



El gran libro de HTML5, CSS3 y Javascript 


pause() Este metodo pausa la reproduccion del medio. 

load() Este metodo descarga el archivo del medio. Es util en aplicaciones dinamicas. 
canPlayType(formato) Este metodo indica si el formato del archivo que queremos utilizar es 
soportado por el navegador o no. Retorna una cadena vacia si el navegador no puede 
reproducir el medio y los textos "maybe" (quizas) o "probably" (probablemente) basado 
en la confianza que tiene de que el medio pueda ser reproducido o no. 

Propiedades 

Las propiedades mas comunes de esta API son: 

paused Esta propiedad retorna true (verdadero) si la reproduccion del medio se 
encuentra pausada o no ha comenzado. 

ended Esta propiedad retorna true (verdadero) si la reproduccion llego al final del medio, 
duration Esta propiedad retorna la duracion del medio en segundos. 
currentTime Esta es una propiedad que puede retornar o recibir un valor para informar la 
posicion en la cual el medio se encuentra reproduciendo o establecer una nueva 
posicion donde comenzar a reproducir. 
error Esta propiedad retorna el valor del error cuando un error ocurre. 
buffered Esta propiedad ofrece informacion sobre la cantidad del archivo que fue 
descargado e introducido en el buffer. Retorna un array conteniendo datos sobre cada 
porcion del medio que ha sido descargada. Si el usuario salta a otra parte del medio 
que no ha sido aun descargada, el navegador comenzara a descargar el medio desde 
ese punto, generando una nueva porcion en el buffer. Los elementos del array son 
accesibles por medio de los atributos end() y start (). Por ejemplo, el codigo 
buffered.end (0) retornara la duracion en segundos de la primera porcion del 
medio encontrada en el buffer. 
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6.1 Formularios Web 

La Web 2.0 esta completamente enfocada en el usuario. Y cuando el usuario es el centro 
de atencion, todo esta relacionado con interfaces, en como hacerlas mas intuitivas, mas 
naturales, mas practicas, y por supuesto mas atractivas. Los formularios web son la 
interface mas importante de todas, permiten a los usuarios insertar datos, tomar 
decisiones, comunicar informacion y cambiar el comportamiento de una aplicacion. 
Durante los ultimos anos, codigos personalizados y librerias fueron creados para procesar 
formularios en el ordenador del usuario. HTML5 vuelve a estas funciones estandar 
agregando nuevos atributos, elementos y una API completa. Ahora la capacidad de 
procesamiento de informacion insertada en formularios en tiempo real ha sido 
incorporada en los navegadores y completamente estandarizada. 

El elemento <form> 

Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, 
pero HTML5 ha agregado nuevos elementos, tipos de campo y atributos para expandirlos 
tanto como sea necesario y proveer asf las funciones actualmente implementadas en 
aplicaciones web. 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Formularios</title> 

</head> 

<body> 

<section> 

<form name="miformulario" id="miformulario" method="get"> 
<input type="text" name="nombre" id="nombre"> 

<input type="submit" value="Enviar"> 

</form> 

</section> 

</body> 

</html> 


Listado 6-1. Estructura normal de un formulario. 
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En el Listado 6-1 creamos una plantilla basica para formularios. Como puede ver, la 
estructura del formulario y sus atributos siguen siendo igual que en especificaciones 
previas. Sin embargo, existen nuevos atributos para el elemento <form>: 

autocomplete Este es un viejo atributo que se ha vuelto estandar en esta especificacion. 
Puede tomar dos valores: on y off. El valor por defecto es on. Cuando es configurado 
como off los elementos <input> pertenecientes a ese formulario tendran la funcion 
de autocompletar desactivada, sin mostrar entradas previas como posibles valores. 
Puede ser implementado en el elemento <form> o en cualquier elemento <input> 
independientemente. 

novalidate Una de las caracteristicas de formularios en HTML5 es la capacidad propia de 
validation. Los formularios son automaticamente validados. Para evitar este 
comportamiento, podemos usar el atributo novalidate. Para lograr lo mismo para 
elementos <input> especfficos, existe otro atributo llamado formnovaiidate. Ambos 
atributos son booleanos, ningun valor tiene que ser especificado (su presencia es 
suficiente para activar su funcion). 

El elemento <input> 

El elemento mas importante en un formulario es <input>. Este elemento puede cambiar 
sus caracteristicas gracias al atributo type (tipo). Este atributo determina que clase de 
entrada es esperada desde el usuario. Los tipos disponibles hasta el momenta eran el 
multipropositos text (para textos en general) y solo unos pocos mas especificos como 
password o submit. HTML5 ha expandido las opciones incrementando de este modo las 
posibilidades para este elemento. 

En HTML5 estos nuevos tipos no solo estan especificando que clase de entrada es 
esperada sino tambien diciendole al navegador que debe hacer con la information 
recibida. El navegador procesara los datos ingresados de acuerdo al valor del atributo 
type y validara la entrada o no. 

El atributo type trabaja junto con otros atributos adicionales para ayudar al 
navegador a limitar y controlar en tiempo real lo ingresado por el usuario. 

Hagalo usted mismo: Cree un nuevo archivo HTML con la plantilla del Listado 6-1. 
Para comprobar como funciona cada tipo de campo estudiado de aqui en adelante, 
reemplace los elementos <input> en la plantilla por aquellos que quiere probar y 
abra nuevamente el archivo en su navegador. En este momenta la forma en la que 
los tipos de campo son tratados varia, por este motivo le recomendamos probar el 
codigo en cada navegador disponible. 

Tipo email 

Casi todo formulario en la web ofrece un campo para ingresar una direction de email, 
pero hasta ahora el unico tipo de campo disponible para esta clase de datos era text. El 
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tipo text representa un texto general, no un dato especifico, por lo que temamos que 
controlar la entrada con codigo Javascript para estar seguros de que el texto ingresado 
correspondia a un email valido. Ahora el navegador se hace cargo de esto con el nuevo 
tipo email: 


cinput type="email" name="miemail" id="miemail"> 


Listado 6-2. El tipo email. 

El texto insertado en el campo generado por el codigo del Listado 6-2 sera controlado por 
el navegador y validado como un email. Si la validacion falla, el formulario no sera enviado. 

Como cada navegador respondera a una entrada invalida no esta determinado en la 
especificacion de HTML5. Por ejemplo, algunos navegadores mostraran un borde rojo 
alrededor del elemento <input> que produjo el error y otros lo mostraran en azul. 
Existen formas de personalizar esta respuesta, pero las veremos mas adelante. 

Tipo search 

El tipo search (busqueda) no controla la entrada, es solo una indicacion para los 
navegadores. Al detectar este tipo de campo algunos navegadores cambiaran el diseno del 
elemento para ofrecer al usuario un indicio de su proposito. 


<input type="search" name="busqueda" id="busqueda"> 


Listado 6-3. El tipo search. 


Tipo url 

Este tipo de campo trabaja exactamente igual que el tipo email pero es espedfico para 
direcciones web. Esta destinado a recibir solo URLs absolutas y retornara un error si el 
valor es invalido. 


<input type="url" name="miurl" id="miurl"> 


Listado 6-4. El tipo url. 


Tipo tel 

Este tipo de campo es para numeros telefonicos. A diferencia de los tipos email y url, el 
tipo tel no requiere ninguna sintaxis en particular. Es solo una indicacion para el 
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navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la 
aplicacion es ejecutada. 


<input type="tel" name="telefono" id="telefono"> 


Listado 6-5. El tipo tel. 

Tipo number 

Como su nombre lo indica, el tipo number es solo valido cuando recibe una entrada 
numerica. Existen algunos atributos nuevos que pueden ser utiles para este campo: 

min El valor de este atributo determina el minimo valor aceptado para el campo. 
max El valor de este atributo determina el maximo valor aceptado para el campo. 
step El valor de este atributo determina el tamano en el que el valor sera incrementado o 
disminuido en cada paso. Por ejemplo, si declara un valor de 5 para step en un campo 
que tiene un valor minimo de 0 y maximo de 10, el navegador no le permitira especificar 
valores entre 0 y 5 o entre 5 y 10. 


cinput type="number" name="numero" id="numero" min="0" max="10" 


Listado 6-6. El tipo number. 

No es necesario especificar ambos atributos (min y max), y el valor por defecto para 
step es 1. 

Tipo range 

Este tipo de campo hace que el navegador construya una nueva clase de control que no 
existia previamente. Este nuevo control le permite al usuario seleccionar un valor a partir 
de una serie de valores o rango. Normalmente es mostrado en pantalla como una puntero 
deslizable o un campo con flechas para seleccionar un valor entre los predeterminados, 
pero no existe un diseno estandar hasta el momento. 

El tipo range usa los atributos min y max estudiados previamente para configurar los 
limites del rango. Tambien puede utilizar el atributo step para establecer el tamano en el 
cual el valor del campo sera incrementado o disminuido en cada paso. 


cinput type="range" name="numero" id="numero" min="0" max="10" 

step="5"> 


Listado 6-7. El tipo range. 
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Podemos declarar el valor inicial utilizando el viejo atributo value y usar Javascript 
para mostrar el numero seleccionado en pantalla como referenda. Experimentaremos con 
esto y el nuevo elemento <output> mas adelante. 

Tipo date 

Este es otro tipo de campo que genera una nueva clase de control. En este caso fue 
incluido para ofrecer una mejor forma de ingresar una fecha. Algunos navegadores 
muestran en pantalla un calendario que aparece cada vez que el usuario hace die sobre el 
campo. El calendario le permite al usuario seleccionar un dia que sera ingresado en el 
campo junto con el resto de la fecha. Un ejemplo de uso es cuando necesitamos 
proporcionar un metodo para seleccionar una fecha para un vuelo o la entrada a un 
espectaculo. Gracias al tipo date ahora es el navegador el que se encarga de construir un 
almanaque o las herramientas necesarias para facilitar el ingreso de este tipo de datos. 


<input type="date" name="fecha" id="fecha"> 


Listado 6-8. El tipo date. 

La interface no fue declarada en la especificacion. Cada navegador provee su propia 
interface y a veces adaptan el diseno al dispositivo en el cual la aplicacion esta siendo 
ejecutada. Normalmente el valor generado y esperado tiene la sintaxis ano-mes-dia. 

Tipo week 

Este tipo de campo ofrece una interface similar a date, pero solo para seleccionar una 
semana completa. Normalmente el valor esperado tiene la sintaxis 2011-W50 donde 2011 
es al ano y 50 es el numero de la semana. 


<input type="week" name="semana" id="semana"> 


Listado 6-9. El tipo week. 


Tipo month 

Similar al tipo de campo previo, este es especifico para seleccionar meses. Normalmente 
el valor esperado tiene la sintaxis ano-mes. 


<input type="month" name="mes" id="mes"> 


Listado 6-10. El tipo month. 
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Tipo time 

El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas 
y minutos, pero su comportamiento depende de cada navegador en este momento. 
Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos, pero 
tambien puede ser solo hora:minutos. 


<input type="time" name="hora" id="hora"> 


Listado 6-11. El tipo time. 


Tipo datetime 

El tipo de campo datetime es para ingresar fecha y hora completa, incluyendo la zona 
horaria. 


<input type="datetime" name="fechahora" id="fechahora"> 
Listado 6-12. El tipo datetime. 

Tipo datetime-local 

El tipo de campo datetime-local es como el tipo datetime sin la zona horaria. 


<input type="datetime-local" name="tiempolocal" id="tiempolocal"> 


Listado 6-13. El tipo datetime-local. 

Tipo color 

Ademas de los tipos de campo para fecha y hora existe otro tipo que provee una interface 
predefinida similar para seleccionar colores. Normalmente el valor esperado para este 
campo es un numero hexadecimal, como #00FF00. 


<input type="color" name="micolor" id="micolor"> 


Listado 6-14. El tipo color. 
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Ninguna interface fue especificada como estandar en HTML5 para el tipo de campo 
color, pero es posible que una grilla con un conjunto basico de colores sea adoptada e 
incorporada en los navegadores. 


6.2 Nuevos atributos 

Algunos tipos de campo requieren de la ayuda de atributos, como los anteriormente 
estudiados min, max y step. Otros tipos de campo requieren la asistencia de atributos 
para mejorar su rendimiento o determinar su importancia en el proceso de validacion. Ya 
vimos algunos de ellos, como novalidate para evitar que el formulario completo sea 
validado o formnovalidate para hacer lo mismo con elementos individuales. El atributo 
autocomplete, tambien estudiado anteriormente, provee medidas de seguridad 
adicionales para el formulario completo o elementos individuales. Aunque utiles, estos 
atributos no son los unicos incorporados por HTML5. Es momento de estudiar el resto. 

Atributo placeholder 

Especialmente en tipos de campo search, pero tambien en entradas de texto normales, 
el atributo placeholder representa una sugerencia corta, una palabra o frase provista 
para ayudar al usuario a ingresar la informacion correcta. El valor de este atributo es 
presentado en pantalla por los navegadores dentro del campo, como una marca de agua 
que desaparece cuando el elemento es enfocado. 


<input type="search" name="busqueda" id="busqueda" 

placeholders"escriba su busqueda"> 


Listado 6-15. El atributo placeholder. 


Atributo required 

Este atributo booleano no dejara que el formulario sea enviado si el campo se encuentra 
vaclo. Por ejemplo, cuando usamos el tipo email para recibir una direccion de email, el 
navegador comprueba si la entrada es un email valido o no, pero validara la entrada si el 
campo esta vaclo. Cuando el atributo required es incluido, la entrada sera valida solo si 
se cumplen las dos condiciones: que el campo no este vaclo y que el valor ingresado este 
de acuerdo con los requisitos del tipo de campo. 


<input type="email" name="miemail" id="miemail" required> 


Listado 6-16. El campo email ahora es un campo requerido. 
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Atributo multiple 

El atributo multiple es otro atributo booleano que puede ser usado en algunos tipos de 
campo (por ejemplo, email o file) para permitir el ingreso de entradas multiples en el 
mismo campo. 

Los valores insertados deben estar separados por coma para ser validos. 


cinput type="email" name="miemail" id="miemail" multiple> 


Listado 6-17. El campo email acepta multiples valores separados por coma. 

El codigo en el Listado 6-17 permite la insercion de multiples valores separados por 
coma, y cada uno de ellos sera validado por el navegador como una direccion de email. 

Atributo autofocus 

Esta es una funcion que muchos desarrolladores aplicaban anteriormente utilizando el 
metodo focus 0 de Javascript. Este metodo era efectivo pero forzaba el foco sobre el 
elemento seleccionado, incluso cuando el usuario ya se encontraba posicionado en otro 
diferente. Este comportamiento era irritante pero dificil de evitar hasta ahora. 

El atributo autofocus enfocara la pagina web sobre el elemento seleccionado pero 
considerando la situacion actual. No movera el foco cuando ya haya sido establecido por 
el usuario sobre otro elemento. 


<input type="search" name="busqueda" id="busqueda" autofocus> 


Listado 6-18. El atributo autofocus aplicado sobre un campo de busqueda. 

Atributo pattern 

El atributo pattern es para propositos de validacion. Usa expresiones regulares para 
personalizar reglas de validacion. Algunos de los tipos de campo ya estudiados validan 
cadenas de texto espedficas, pero no permiten hacer validaciones personalizadas, como 
por ejemplo un codigo postal que consiste en 5 numeros. No existe ningun tipo de campo 
predeterminado para esta clase de entrada. 

El atributo pattern nos permite crear nuestro propio tipo de campo para controlar 
esta clase de valores no ordinarios. Puede incluso incluir un atributo title para 
personalizar mensajes de error. 
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<input patterns"[0-9]{5}" name="codigopostal" id="codigopostal" 
title="inserte los 5 numeros de su codigo postal"> 


Listado 6-19. Tipos personalizados usando el atributo pattern. 

IMPORTANTE: Expresiones regulares son un tema complejo y no relacionado 
directamente con HTML5. Para obtener informacion adicional al respecto, visite 
nuestro sitio web y siga los enlaces correspondientes a este capitulo. 

Atributo form 

El atributo form es una adicion util que nos permite declarar elementos para un 
formulario fuera del ambito de las etiquetas <form>. Hasta ahora, para construir un 
formulario tenfamos que escribir las etiquetas <form> de apertura y cierre y luego 
declarar cada elemento del formulario entre ellas. En HTML5 podemos insertar los 
elementos en cualquier parte del codigo y luego hacer referencia al formulario que 
pertenecen usando su nombre y el atributo form: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Formularios</title> 

</head> 

<input type="search" names"busqueda" ids"busqueda" 

forms" formulario"> 

</nav> 

<section> 

<form name="formulario" id="formulario" methods"get"> 

<input type="text" name="nombre" id="nombre"> 
cinput type="submit" value="Enviar"> 

</form> 

</section> 

</body> 

</html> 


Listado 6-20. Dedarando elementos del formulario en cualquier parte. 

6.3 Nuevos elementos para formularios 

Ya hemos visto los nuevos tipos de campos disponibles en HTML5, por lo tanto es 
momento de estudiar los nuevos elementos HTML incorporados con la intencion de 
mejorar o expandir las posibilidades de los formularios. 
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El elemento <datalist> 

El elemento <datalist> es un elemento especffico de formularios usado para construir 
una lista de items que luego, con la ayuda del atributo list, sera usada como sugerencia 
en un campo del formulario. 


:datalist id="informacion"> 

coption value="123123123" label="Telefono 1"> 
<option value="456456456" label="Telefono 2"> 
:/datalist> 


Listado 6-21. Construyendo la lista. 

Este elemento utiliza el elemento <option> en su interior para crear la lista de datos 
a sugerir. Con la lista ya declarada, lo unico que resta es referenciarla desde un elemento 
<input > usando el atributo list: 


cinput type="tel" name="telefono" id="telefono" list="informacion"> 


Listado 6-22. Ofreciendo una lista de sugerencias con el atributo list. 

El elemento en el Listado 6-22 mostrara posibles valores para que el usuario elija. 

IMPORTANTE: El elemento <datalist> fue solo implementado en Opera y 
Firefox Beta en este momento. 

El elemento <progress> 

Este elemento no es especffico de formularios, pero debido a que representa el progreso 
en la realization de una tarea, y usualmente estas tareas son comenzadas y procesadas a 
traves de formularios, puede ser incluido dentro del grupo de elementos para formularios. 

El elemento <progress> utiliza dos atributos para configurar su estado y Ifmites. El 
atributo value indica que parte de la tarea ya ha sido procesada, y max declara el valor a 
alcanzar para que la tarea se considere finalizada. Vamos a usar <progress> en futuros 
ejemplos. 

El elemento <meter> 

Similar a <progress>, el elemento <meter> es usado para mostrar una escala, pero no 
de progreso. Este elemento tiene la intention de representar una medida, como el trafico 
del sitio web, por ejemplo. 


132 



Formularios y API Forms 


El elemento <meter> cuenta con varios atributos asociados: min y max configuran los 
limites de la escala, value determina el valor medido, y low, high y optimum son usados 
para segmentar la escala en secciones diferenciadas y marcar la posicion que es optima. 

El elemento <output> 

Este elemento representa el resultado de un calculo. Normalmente ayudara a mostrar los 
resultados del procesamiento de valores provistos por un formulario. El atributo for 
asocia el elemento <output> con el elemento fuente que participa del calculo, pero este 
elemento debera ser referenciado y modificado desde codigo Javascript. Su sintaxis es 
<output>valor</output>. 


6.4 API Forms 

Seguramente no le sorprendera saber que, al igual que cada uno de los aspectos de 
HTML5, los formularios HTML cuentan con su propia API para personalizar todos los 
aspectos de procesamiento y validacion. 

Existen diferentes formas de aprovechar el proceso de validacion en HTML5. Podemos 
usar los tipos de campo para activar el proceso de validacion por defecto (por ejemplo, 
email) o volver un tipo de campo regular como text (o cualquier otro) en un campo 
requerido usando el atributo required. Tambien podemos crear tipos de campo 
especiales usando pattern para personalizar requisitos de validacion. Sin embargo, 
cuando se trata de aplicar mecanismos complejos de validacion (por ejemplo, combinando 
campos o comprobando los resultados de un calculo) deberemos recurrir a nuevos 
recursos provistos por esta API. 

setCustomValidity() 

Los navegadores que soportan HTML5 muestran un mensaje de error cuando el usuario 
intenta enviar un formulario que contiene un campo invalido. 

Podemos crear mensajes para nuestros propios requisitos de validacion usando el 
metodo setCustomValidity(mensaje) . 

Con este metodo especificamos un error personalizado que mostrara un mensaje 
cuando el formulario es enviado. Cuando un mensaje vacio es declarado, el error es 
anulado. 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Formularios</title> 
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function iniciar(){ 

nombrel=document.getElementByld("nombre"); 
nombre2=document.getElementByld("apellido"); 
nombrel.addEventListener("input", validacion, false); 
nombre2.addEventListener("input", validacion, false); 
validacion(); 

} 

function validacion(){ 

if(nombrel,value=='' && nombre2.value== 1 '){ 

nombrel.setCustomValidity('inserte al menos un nombre 1 ); 
nombrel.style.background= 1 #FFDDDD 1 ; 

}else{ 

nombrel.setCustomValidity(' 1 ); 
nombrel.style.background= 1 #FFFFFF 1 ; 

} 

} 

window.addEventListener("load", iniciar, false); 

</script> 

</head> 

<section> 

<form name="registracion" method="get"> 

Nombre: 

<input type="text" name="nombre" id="nombre"> 

Apellido: 

cinput type="text" name="apellido" id="apellido"> 

<input type="submit" id="send" value="ingresar"> 

</form> 

</section> 

</body> 

< /fitml > 


Listado 6-23. Declarando errores personalizados. 

El codigo del Listado 6-23 presents una situacion de validacion compleja. Dos campos 
fueron creados para recibir el nombre y apellido del usuario. Sin embargo, el formulario 
solo sera invalido cuando ambos campos se encuentran vacios. El usuario necesita 
ingresar solo uno de los campos, su nombre o su apellido, para validar la entrada. 

En casos como este no es posible usar el atributo required debido a que no sabemos 
cual campo el usuario decidira utilizar. Solo con codigo Javascript y errores personalizados 
podremos crear un efectivo mecanismo de validacion para este escenario. 

Nuestro codigo comienza a funcionar cuando el evento load es disparado. La funcion 
iniciar () es llamada para responder al evento. Esta funcion crea referencias para los dos 
elementos <input> y agrega una escucha para el evento input en ambos. Estas escuchas 
llamaran a la funcion validacion () cada vez que el usuario escribe dentro de los campos. 

Debido a que los elementos <input> se encuentran vacios cuando el documento es 
cargado, debemos declarar una condicion invalida para no permitir que el usuario envie el 
formulario antes de ingresar al menos uno de los valores. Por esta razon la funcion 
validacion () es llamada al comienzo. Si ambos campos estan vacios el error es 
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generado y el color de fondo del campo nombre es cambiado a rojo. Sin embargo, si esta 
condicion ya no es verdad porque al menos uno de los campos fue completado, el error es 
anulado y el color del fondo de nombre es nuevamente establecido como bianco. 

Es importante tener presente que el unico cambio producido durante el 
procesamiento es la modificacion del color de fondo del campo. El mensaje declarado 
para el error con setCustomValidity () sera visible solo cuando el usuario intente 
enviar el formulario. 

Hagalo usted mismo: Para propositos de prueba, incluimos el codigo Javascript 
dentro del documento. Como resultado, lo unico que debe hacer para ejecutar 
este ejemplo es copiar el codigo del Listado 6-23 dentro de un archivo HTML 
vacio y abrir el archivo en su navegador. 

IMPORTANTE: API Forms esta siendo desarrollada en este momento. Depen- 
diendo del nivel al que la tecnologia haya sido adoptada en el momento en el que 
usted lee estas lineas es probable que necesite probar los codigos de este 
capitulo en diferentes navegadores para comprobar su correcto funcionamiento. 

El evento invalid 

Cada vez que el usuario envia el formulario, un evento es disparado si un campo invalido 
es detectado. El evento es llamado invalid y es disparado por el elemento que produce 
el error. Podemos agregar una escucha para este evento y asi ofrecer una respuesta 
personalizada, como en el siguiente ejemplo: 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Formularios</title> 

<script> 

function iniciar(){ 

edad=document.getElementByld("miedad"); 

edad.addEventListener("change", cambiarrango, false); 

document.informacion.addEventListener("invalid", 

validacion, true); 

document.getElementByld("enviar").addEventListener("click", 

enviar, false); 

} 

function cambiarrango(){ 

var salida=document.getElementByld("rango"); 
var calc=edad.value-20; 
if(calc<20){ 
calc=0; 

edad.value=20; 

} 
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salida.innerHTML=calc+' a '+edad.value; 

} 

function validacion(e){ 
var elemento=e.target; 
elemento.style.background='#FFDDDD'; 

} 

function enviar(){ 

var valido=document.informacion.checkValidity(); 
if(valido){ 

document.informacion.submit(); 

} 

} 

window.addEventListener("load", iniciar, false); 

</script> 

</head> 

<section> 

<form name="informacion" method="get"> 

Usuario: 

cinput pattern="[A-Za-z]{3,}" name="usuario" id="usuario" 
maxlength="10" required> 

<input type="email" name="miemail" id="miemail" required> 
Rango de Edad: 

cinput type="range" name="miedad" id="miedad" min="0" 

max="80" step="20" value="20"> 
coutput id="rango">0 a 20</output> 

cinput type="button" id="enviar" value="ingresar"> 
c/form> 
c/section> 
c/body> 
c/html> 


Listado 6-24. Nuestro propio sistema de validacion. 

En el Listado 6-24, creamos un nuevo formulario con tres campos para ingresar el 
nombre de usuario, un email y un rango de 20 anos de edad. 

El campo usuario tiene tres atributos para validacion: el atributo pattern solo 
admite el ingreso de un texto de tres caracteres mlnimo, desde la A a la Z (mayusculas o 
minusculas), el atributo maxlength limita la entrada a 10 caracteres maximo, y el atributo 
required invalida el campo si esta vado. El campo miemail cuenta con sus limitaciones 
naturales debido a su tipo y ademas no podra enviarse vado gracias al atributo required. 
El campo miedad usa los atributos min, max, step y value para configurar las 
condiciones del rango. 

Tambien declaramos un elemento <output> para mostrar en pantalla una referenda 
del rango seleccionado. 

Lo que el codigo Javascript hace con este formulario es simple: cuando el usuario hace 
die en el boton "ingresar", un evento invalid sera disparado desde cada campo invalido 
y el color de fondo de esos campos sera cambiado a rojo por la funcion validacion (). 


136 



Formularios y API Forms 


Veamos este procedimiento con un poco mas de detalle. El codigo comienza a 
funcionar cuando el tipico evento load es disparado luego que el documento fue 
completamente cargado. La funcion iniciarO es ejecutada y tres escuchas son 
agregadas para los eventos change, invalid y click. 

Cada vez que el contenido de los elementos del formulario cambia por alguna razon, el 
evento change es disparado desde ese elemento en particular. Lo que hicimos fue 
escuchar a este evento desde el campo range y llamar a la funcion cambiarrango () 
cada vez que el evento ocurre. Por este motivo, cuando el usuario desplaza el control del 
rango o cambia los valores dentro de este campo para seleccionar un rango de edad 
diferente, los nuevos valores son calculados por la funcion cambiarrango (). Los valores 
admitidos para este campo son periodos de 20 anos (por ejemplo, 0 a 20 o 20 a 40). Sin 
embargo, el campo solo retorna un valor, como 20, 40, 60 u 80. Para calcular el valor de 
comienzo del rango, restamos 20 al valor actual del campo con la formula edad.value - 
20, y grabamos el resultado en la variable calc. El periodo minimo admitido es 0 a 20, por 
lo tanto con un condicional if controlamos esta condicion y no permitimos un periodo 
menor (estudie la funcion cambiarrango () para entender como funciona). 

La segunda escucha agregada en la funcion iniciarO es para el evento invalid. La 
funcion validacionO es llamada cuando este evento es disparado para cambiar el color 
de fondo de los campos invalidos. Recuerde que este evento sera disparado desde un 
campo invalido cuando el boton "ingresar" sea presionado. El evento no contiene una 
referencia del formulario o del boton "ingresar", sino del campo que genero el error. En la 
funcion validacionO esta referencia es capturada y grabada en la variable elemento 
usando la variable e y la propiedad target. La construction e.target retorna una 
referencia al elemento <input> invalido. Usando esta referencia, en la siguiente linea 
cambiamos el color de fondo del elemento. 

Volviendo a la funcion iniciarO, encontraremos una escucha mas que necesitamos 
analizar. Para tener control absolute sobre el envio del formulario y el momenta de validacion, 
creamos un boton regular en lugar del tipico boton submit. Cuando este boton es presionado, 
el formulario es enviado, pero solo si todos sus elementos son validos. La escucha agregada 
para el evento click en la funcion iniciarO ejecutara la funcion enviarO cuando el 
usuario haga clic sobre el boton. Usando el metodo checkValidity O solicitamos al 
navegador que realice el proceso de validacion y solo enviamos el formulario usando el 
tradicional metodo submit O cuando ya no hay mas condiciones invalidas. 

Lo que hicimos con el codigo Javascript fue tomar control sobre todo el proceso de 
validacion, personalizando cada aspecto y modificando el comportamiento del navegador. 

Validacion en tiempo real 

Cuando abrimos el archivo con la plantilla del Listado 6-24 en el navegador, podremos 
notar que no existe una validacion en tiempo real. Los campos son solo validados cuando 
el boton "ingresar" es presionado. Para hacer mas practico nuestro sistema personalizado 
de validacion, tenemos que aprovechar los atributos provistos por el objeto 
Validity-State. 


137 



El gran libro de HTML5, CSS3 y Javascript 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Formularios</title> 

<script> 

function iniciar(){ 

edad=document.getElementByld("miedad"); 
edad.addEventListener("change", cambiarrango, false); 
document.informacion.addEventListener("invalid", 
validacion, true); 

document.getElementByld("enviar").addEventListener("click", 

enviar, false); 

document.informacion.addEventListener("input", controlar. 


function cambiarrango(){ 

var salida=document.getElementByld("rango"); 
var calc=edad.value-20; 
if(calc<20){ 
calc=0; 

edad.value=20; 

} 

salida.innerHTML=calc+ 1 a 1 +edad.value; 

} 

function validacion(e){ 
var elemento=e.target; 
elemento.style.background= 1 #FFDDDD'; 

} 

function enviar(){ 

var valido=document.informacion.checkValidity(); 
if(valido){ 

document.informacion.submit(); 

} 

} 

function controlar(e){ 
var elemento=e.target; 
if(elemento.validity.valid){ 

elemento.style.backgrounds 1 #FFFFFF■; 

}else{ 

elemento.style.backgrounds 1 #FFDDDD■; 

} 

} 

window.addEventListener("load", iniciar, false); 

</script> 

</head> 

<section> 

<form name="informacion" method="get"> 

Usuario: 

cinput patterns"[A-Za-z] {3 ,}" name="usuario" id="usuario" 
maxlength="10" required> 
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cinput type="email" name="miemail" id="miemail" required> 
Rango de Edad: 

cinput type="range" name="miedad" id="miedad" min="0" 

max="80" step="20" value="20"> 
<output id="rango">0 a 20</output> 

cinput type="button" id="enviar" value="ingresar"> 
c/form> 

</section> 
c/body> 
c/html> 


Listado 6-25. Validando en tiempo real. 

En el Listado 6-25, una nueva escucha fue agregada para el evento input sobre el 
formulario. Cada vez que el usuario modifica un campo, escribiendo o cambiando su 
contenido, la funcion controiar () es ejecutada para responder a este evento. 

La funcion controiar () tambien aprovecha la propiedad target para crear una 
referencia hacia el elemento que disparo el evento input. La validez del campo es 
controlada por medio del estado valid provisto por el atributo validity en la 
construction elemento.validity.valid. 

El estado valid sera true (verdadero) si el elemento es valido y false (falso) si no lo 
es. Usando esta informacion cambiamos el color del fondo del elemento. Este color sera, 
por lo tanto, bianco para un campo valido y rojo para uno invalido. 

Con esta simple incorporation logramos que cada vez que el usuario modifica el valor 
de un campo del formulario, este campo sera controlado y validado, y su condicion sera 
mostrada en pantalla en tiempo real. 

Propiedades de validation 

En el ejemplo del Listado 6-25 controlamos el estado valid. Este estado particular es un 
atributo del objeto ValidityState que retornara el estado de un elemento 
considerando cada uno de los posibles estados de validacion. Si cada condicion es valida 
entonces el valor del atributo valid sera true (verdadero). 

Existen ocho posibles estados de validez para las diferentes condiciones: 

valueMissing Este estado es true (verdadero) cuando el atributo required fue 
declarado y el campo esta vacio. 

typeMismatch Este estado es true (verdadero) cuando la sintaxis de la entrada no 
corresponde con el tipo especificado (por ejemplo, si el texto insertado en un tipo de 
campo email no es una direccion de email valida). 
patternMismatch Este estado es true (verdadero) cuando la entrada no corresponde con 
el patron provisto por el atributo pattern. 

tooLong Este estado es true (verdadero) cuando el atributo maxlength fue declarado y 
la entrada es mas extensa que el valor especificado para este atributo. 
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rangeUnderflow Este estado es true (verdadero) cuando el atributo min fue declarado y 
la entrada es menor que el valor especificado para este atributo. 
rangeOverflow Esta estado es true (verdadero) cuando el atributo max fue declarado y la 
entrada es mas grande que el valor especificado para este atributo. 
stepMismatch Este estado es true (verdadero) cuando el atributo step fue declarado y 
su valor no corresponde con los valores de atributos como min, max y value. 
customError Este estado es true (verdadero) cuando declaramos un error personalizado 
usando el metodo setCustomValidity 0 estudiado anteriormente. 

Para controlar estos estados de validacion, debemos utilizar la sintaxis 
elemento.validity.estado (donde estado es cualquiera de los valores listados 
arriba). Podemos aprovechar estos atributos para saber exactamente que origino el error 
en un formulario, como en el siguiente ejemplo: 


function enviar(){ 

var elemento=document.getElementById("usuario"); 
var valido=document.informacion.checkValidity(); 

if(valido){ 

document.informacion.submit(); 

}else if(elemento.validity.patternMismatch || 

elemento.validity.valueMissing){ 

alert( 1 el nombre de usuario debe tener minimo de 3 caracteres'); 

} 


Listado 6-26. Usando estados de validacion para mostrar un mensaje de error personalizado. 

En el Listado 6-26, la funcion enviar () fue modificada para incorporar esta clase de 
control. El formulario es validado por el metodo checkValidity () y si es valido es 
enviado con submit (). En caso contrario, los estados de validacion patternMismatch y 
valueMissing para el campo usuario son controlados y un mensaje de error es 
mostrado cuando el valor de alguno de ellos es true (verdadero). 

Hagalo usted mismo: Reemplace la funcion enviar () en la plantilla del Listado 6-25 
con la nueva funcion del Listado 6-26 y abra el archivo HTML en su navegador. 

willValidate 

En aplicaciones dinamicas es posible que los elementos involucrados no tengan que ser 
validados. Este puede ser el caso, por ejemplo, con botones, campos ocultos o elementos 
como <output>. La API nos ofrece la posibilidad de detectar esta condicion usando el 
atributo willValidate y la sintaxis elemento .willValidate. 
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6.5 Referenda rapida 

Los formularios constituyen el principal medio de comunicacion entre usuarios y 
aplicaciones web. HTML5 incorpora nuevos tipos para el elemento <input>, una API 
completa para validar y procesar formularios, y atributos para mejorar esta interface. 

Tipos 

Algunos de los nuevos tipos de campo introducidos por HTML5 tienen condiciones de 
validacion implicitas. Otros solo declaran un proposito para el campo que ayudara a los 
navegadores a presentar el formulario en pantalla. 

email Este tipo de campo valida la entrada como una direccion de email, 
search Este tipo de campo da informacion al navegador sobre el proposito del campo 
(busqueda) para ayudar a presentar el formulario en pantalla. 
url Este tipo de campo valida la entrada como una direccion web. 

tel Este tipo de campo da informacion al navegador sobre el proposito del campo (numero 
telefonico) para ayudar a presentar el formulario en pantalla. 
number Este tipo de campo valida la entrada como un numero. Puede ser combinado con 
otros atributos (como min, max y step) para limitar los numeros permitidos. 
range Este tipo de campo genera un nuevo control en pantalla para la seleccion de 
numeros. La entrada es limitada por los atributos min, max y step. El atributo value 
establece el valor inicial para el elemento. 

date Este tipo de campo valida la entrada como una fecha en el formato ano-mes-dia. 
month Este tipo de campo valida la entrada como una fecha en el formato ano-mes. 
week Este tipo de campo valida la entrada como una fecha en el formato ano-semana 
donde el segundo valor es representado por una letra W y el numero de la semana. 
time Este tipo de campo valida la entrada como una hora en el formato 
hora:minutos: segundos. Tambien puede tomar otras sintaxis como hora:minutos. 
datetime Este tipo de campo valida la entrada como fecha y hora completa, incluyendo 
zona horaria. 

datetime-local Este tipo de campo valida la entrada como una fecha y hora completa, sin 
zona horaria. 

color Este tipo de campo valida la entrada como un valor de color. 

Atributos 

Nuevos atributos fueron tambien agregados en HTML5 para mejorar la capacidad de los 
formularios y ayudar al control de validacion. 

autocomplete Este atributo especifica si los valores insertados seran almacenados para 
futura referencia. Puede tomar dos valores: on y off. 
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autofocus Este es un atributo booleano que enfoca el elemento en el que se encuentra 
cuando la pagina es cargada. 

novalidate Este atributo es exclusivo para elementos <form>. Es un atributo booleano 
que establece si el formulario sera validado por el navegador o no. 
formnovalidate Este atributo es exclusivo para elementos de formulario individuales. Es un 
atributo booleano que establece si el elemento sera validado por el navegador o no. 
placeholder Este atributo ofrece informacion que orientara al usuario sobre la entrada 
esperada. Su valor puede ser una palabra simple o un texto corto, y sera mostrado 
como una marca de agua dentro del campo hasta que el elemento es enfocado. 
required Este atributo declara al elemento como requerido para validacion. Es un atributo 
booleano que no dejara que el formulario sea enviado hasta que una entrada para el 
campo sea provista. 

pattern Este atributo especifica una expresion regular contra la cual la entrada sera 
validada. 

multiple Este es un atributo booleano que permite ingresar multiples valores en el mismo 
campo (como multiples cuentas de email, por ejemplo). Los valores deben ser 
separados por coma. 

form Este atributo asocia el elemento al formulario. El valor provisto debe ser el valor del 
atributo id del elemento <form>. 

list Este atributo asocia el elemento con un elemento <datalist> para mostrar una lista 
de posibles valores para el campo. El valor provisto debe ser el valor del atributo id 
del elemento <datalist>. 

Elementos 

HTML5 tambien incluye nuevos elementos que ayudan a mejorar y expandir formularios. 

<datalist> Este elemento hace posible incluir una lista de opciones predefinidas que sera 
mostrada en un elemento <input> como valores sugeridos. La lista es construida con el 
elemento <option> y cada opcion es declarada con los atributos value y label. Esta 
lista de opciones se relaciona con un elemento <input> por medio del atributo list. 
<progress> Este elemento representa el estado en la evolucion de una tarea (por ejemplo, 
una descarga). 

<meter> Este elemento representa una medida, como el trafico de un sitio web. 

<output> Este elemento presenta un valor de salida para aplicaciones dinamicas. 

Metodos 

HTML5 incluye una API especifica para formularios que provee metodos, eventos y 
propiedades. Algunos de los metodos son: 
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setCustomValidity(mensaje) Este metodo nos permite declarar un error y proveer un 
mensaje de error para un proceso de validacion personalizado. Para anular el error, 
debemos llamar al metodo con una cadena de texto vacia como atributo. 
checkValidity() Este metodo solicita al navegador iniciar el proceso de validacion. Activa el 
proceso de validacion provisto por el navegador sin la necesidad de enviar el 
formulario. Este metodo retorna true (verdadero) si el elemento es valido. 

Eventos 

Los eventos incorporados para esta API son los siguientes: 

invalid Este evento es disparado cuando un elemento invalido es detectado durante el 
proceso de validacion. 

forminput Este evento es disparado cuando un formulario recibe la entrada del usuario. 
formchange Este evento es disparado cuando un cambio ocurre en el formulario. 

Estado 

API Forms provee un grupo de atributos para controlar estados en un proceso de 
validacion personalizado. 

valid Este estado es un estado de validacion general. Retorna true (verdadero) cuando 
ninguno de los estados restantes es true (verdadero), lo que significa que el elemento 
es valido. 

valueMissing Este estado es true (verdadero) cuando el atributo required fue incluido 
en el elemento y el campo esta vacio. 

typeMismatch Este estado es true (verdadero) cuando la entrada no es el valor esperado 
de acuerdo al tipo de campo (por ejemplo, cuando se espera un email o una URL). 
patternMismatch Este estado es true (verdadero) cuando la entrada no es un valor 
admitido por la expresion regular especificada con el atributo pattern. 
tooLong Este estado es true (verdadero) cuando el largo de la entrada es mayor que el 
valor especificado en el atributo maxiength. 

rangeUnderflow Este estado es true (verdadero) cuando la entrada es menor que el valor 
declarado para el atributo min. 

rangeOverflow Este estado es true (verdadero) cuando la entrada es mayor que el valor 
declarado para el atributo max. 

stepMismatch Este estado es true (verdadero) cuando el valor declarado para el atributo 
step no corresponde con los valores en los atributos min, max y value. 
customError Este estado es true (verdadero) cuando un error personalizado fue 
declarado para el elemento. 


143 




Capitulo 7 

API Canvas 


7.1 Preparando el lienzo 

Esta API ofrece una de las mas poderosas caracterfsticas de HTML5. Permite a 
desarrolladores trabajar con un medio visual e interactive para proveer capacidades de 
aplicaciones de escritorio para la web. 

Al comienzo del libro hablamos sobre como HTML5 esta reemplazando previos 
complementos o plug-ins, como Flash o Java applets, por ejemplo. Habfa dos cosas 
importantes a considerar para independizar a la web de tecnologlas desarrolladas por 
terceros: procesamiento de video y aplicaciones graficas. El elemento <video> y la API para 
medios cubren el primer aspecto muy bien, pero no hacen nada acerca de los graficos. La 
API Canvas se hace cargo del aspecto grafico y lo hace de una forma extremadamente 
efectiva. Canvas nos permite dibujar, presentar graficos en pantalla, animar y procesar 
imagenes y texto, y trabaja junto con el resto de la especificacion para crear aplicaciones 
completas e incluso video juegos en 2 y 3 dimensiones para la web. 

El elemento <canvas> 

Este elemento genera un espacio rectangular vado en la pagina web (lienzo) en el cual 
seran mostrados los resultados de ejecutar los metodos provistos por la API. Cuando es 
creado, produce solo un espacio en bianco, como un elemento <div> vaefo, pero con un 
proposito totalmente diferente. 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Canvas API</title> 

<script src="canvas.js"></script> 

</head> 

<body> 

<section id="cajalienzo"> 

<canvas id="lienzo" width="500" height="300"> 
Su navegador no soporta el elemento canvas 
</canvas> 

</section> 
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</body> 

</html> 


Listado 7-1. Sintaxis del elemento <canvas>. 

Solo es necesario especificar unos pocos atributos para este elemento, como puede 
ver en el Listado 7-1. Los atributos width (ancho) y height (alto) declaran el tamano del 
lienzo en pixeles. Estos atributos son necesarios debido a que todo lo que sea dibujado 
sobre el elemento tendra esos valores como referencia. Al atributo id, como en otros 
casos, nos facilita el acceso al elemento desde el codigo Javascript. 

Eso es basicamente todo lo que el elemento <canvas> hace. Simplemente crea una 
caja vacia en la pantalla. Es solo a traves de Javascript y los nuevos metodos y propiedades 
introducidos por la API que esta superficie se transforma en algo practico. 

IMPORTANTE: Por razones de compatibilidad, en caso de que Canvas API no se 
encuentre disponible en el navegador, el contenido entre las etiquetas <canvas> 
sera mostrado en pantalla. 

getContext() 

El metodo getContextO es el primer metodo que tenemos que llamar para dejar al 
elemento <canvas> listo para trabajar. Genera un contexto de dibujo que sera asignado 
al lienzo. A traves de la referencia que retorna podremos aplicar el resto de la API. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext( 1 2d 1 ); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-2. Creando el contexto de dibujo para el lienzo. 

En el Listado 7-2, una referencia al elemento <canvas> fue almacenada en la variable 
elemento y el contexto de dibujo fue creado por getContext (' 2d'). El metodo puede 
tomar dos valores: 2d y 3d. Esto es, por supuesto, para ambientes de 2 dimensiones y 3 
dimensiones. Por el momento solo el contexto 2d esta disponible, pero serios esfuerzos 
estan siendo volcados en el desarrollo de una API estable en 3 dimensiones. 

El contexto de dibujo del lienzo sera una grilla de pixeles listados en filas y columnas de 
arriba a abajo e izquierda a derecha, con su origen (el pixel 0,0) ubicado en la esquina 
superior izquierda del lienzo. 

Hagalo usted mismo: Copie el documento HTML del Listado 7-1 dentro de un 
nuevo archivo vacio. Tambien necesitara crear un archivo llamado canvas, js y 


146 



API Canvas 


copiar el codigo del Listado 7-2 en su interior. Cada codigo presentado en este 
capftulo es independiente y reemplaza al anterior. 

Conceptos basicos: Cuando una variable es declarada dentro de una funcion sin 
la palabra clave var, sera global. Esto significa que la variable sera accesible 
desde otras partes del codigo, incluido el interior de funciones. En el codigo del 
Listado 7-2, declaramos la variable lienzo como global para poder tener 
siempre acceso al contexto del lienzo. 

7.2 Dibujando en el lienzo 

Luego de que el elemento <canvas> y su contexto han sido inicializados podemos 
finalmente comenzar a crear y manipular graficos. La lista de herramientas provista por la 
API para este proposito es extensa, desde la creacion de simples formas y metodos de dibujo 
hasta texto, sombras o transformaciones complejas. Vamos a estudiarlas una por una. 

Dibujando rectangulos 

Normalmente el desarrollador debera preparar la figura a ser dibujada en el contexto 
(como veremos pronto), pero existen algunos metodos que nos permiten dibujar 
directamente en el lienzo, sin preparacion previa. Estos metodos son espedficos para 
formas rectangulares y son los unicos que generan una forma primitiva (para obtener 
otras formas tendremos que combinar otras tecnicas de dibujo y trazados complejos). Los 
metodos disponibles son los siguientes: 

fillRect(x, y, ancho, alto) Este metodo dibuja un rectangulo solido. La esquina superior 
izquierda sera ubicada en la posicion especificada por los atributos x e y. Los atributos 
ancho y alto declaran el tamano. 

strokeRect(x, y, ancho, alto) Similar al metodo anterior, este dibujara un rectangulo vado 
(solo su contorno). 

clearRect(x, y, ancho, alto) Esta metodo es usado para substraer pixeles del area 
especificada por sus atributos. Es un borrador rectangular. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.strokeRect(100,100,120,120); 
lienzo.fillRect(110,110,100,100); 
lienzo.clearRect(120,120,80,80); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-3. Dibujando rectangulos. 
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Esta es la misma funcion del Listado 7-2, pero incorpora los nuevos metodos 
estudiados para dibujar una figura en el lienzo. Como puede ver, el contexto fue asignado 
a la variable global lienzo, y ahora esta variable es usada para referenciar el contexto en 
cada metodo. 

El primer metodo usado en la funcion, strokeRect(l00,l00,l20,l20), dibuja un 
rectangulo vacio con la esquina superior izquierda en la posicion 100,100 y un tamano de 120 
pixeles (este es un cuadrado de 120 pixeles). El segundo metodo, filiRect( 110 , 110 , 
100 , 100 ), dibuja un rectangulo solido, esta vez comenzando desde la posicion 110,110 del 
lienzo. Yfinalmente, con el ultimo metodo, clearRect (120,120,80,80), un recuadrode80 
pixeles es substraido del centra de la figura. 

0 pixeles - > 500 

0 


300 

Figura 7-1. Representation del lienzo y los rectangulos dibujados por el codigo del Listado 7-3. 

La Figura 7-1 es solo una representacion de lo que vera en la pantalla luego de ejecutar 
el codigo del Listado 7-3. El elemento <canvas> es como una grilla, con su origen en la 
esquina superior izquierda y el tamano especificado en sus atributos. Los rectangulos son 
dibujados en el lienzo en la posicion declarada por los atributos x e y, y uno sobre el otro 
de acuerdo al orden en el codigo (el primero en aparecer en el codigo sera dibujado 
primero, el segundo sera dibujado por encima del anterior, y asi sucesivamente). Existe un 
metodo para personalizar como las figuras son dibujadas en pantalla, pero lo veremos mas 
adelante. 

Colores 

Hasta el momento hemos usado el color otorgado por defecto, negro solido, pero 
podemos especificar el color que queremos aplicar mediante sintaxis CSS utilizando las 
siguientes propiedades: 

strokeStyle Esta propiedad declara el color para el contorno de la figura. 


100 


100 


— strokeRect() 
fillRectO 
clearRectQ 


148 












API Canvas 


fillStyle Esta propiedad declara el color para el interior de la figura. 
globalAlpha Esta propiedad no es para definir color sino transparencia. Especifica la 
transparencia para todas las figuras dibujadas en el lienzo. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d 1 ); 

lienzo. fillStyle= ,, #000099"; 
lienzo.strokeStyle="#990000"; 

lienzo.strokeRect(100,100,120,120); 
lienzo.fillRect(110,110,100,100); 
lienzo.clearRect(120,120,80,80); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-4. Aplicando color. 

Los colores en el Listado 7-4 fueron declarados usando numeros hexadecimales. 
Podemos tambien usar funciones como rgb()o incluso especificar transparencia para la 
figura aprovechando la funcion rgbaO . Estos metodos deben ser siempre escritos entre 
comillas (porejemplo, strokeStyle="rgba (255,165,0,1) "). 

Cuando un nuevo color es especificado se vuelve el color por defecto para el resto de 
los dibujos, a menos que volvamos a cambiarlo mas adelante. 

A pesar de que el uso de la funcion rgbaO es posible, existe otra propiedad mas 
especifica para declarar el nivel de transparencia: globalAlpha. Su sintaxis es 
globalAlpha=valor, donde valor es un numero entre 0.0 (totalmente opaco) y 1.0 
(totalmente transparente). 

Gradientes 

Gradientes son una herramienta esencial en cualquier programa de dibujo estos dias, y 
esta API no es la excepcion. Asi como en CSS3, los gradientes en la API Canvas pueden ser 
lineales o radiales, y pueden incluir puntos de terminacion para combinar colores. 

createLinearGradient(xl, yl, x2, y2) Este metodo crea un objeto que luego sera usado 
para aplicar un gradiente lineal al lienzo. 

createRadialGradient(xl, yl, rl, x2, y2, r2) Este metodo crea un objeto que luego sera 
usado para aplicar un gradiente circular o radial al lienzo usando dos circulos. Los 
valores representan la posicion del centro de cada circulo y sus radios. 
addColorStop(posicion, color) Este metodo especifica los colores a ser usados por el 
gradiente. El atributo posicion es un valor entre 0.0 y 1.0 que determina donde la 
degradacion comenzara para ese color en particular. 
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function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d'); 

var gradiente=lienzo.createLinearGradient(0,0,10,100); 
gradiente.addColorStop(0.5, '#0000FF'); 
gradiente.addColorStop(1, '#000000'); 

lienzo.fillStyle=gradiente; 

lienzo.fillRect(10,10,100,100); 
lienzo.fillRect(150,10,200,100); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-5. Aplicando un gradiente lineal al lienzo. 

En el Listado 7-5, creamos el objeto gradiente desde la posicion 0,0 a la 10,100, 
otorgando una leve inclination hacia la izquierda. Los colores fueron declarados por el 
metodo addColorStop () y el gradiente logrado fue finalmente aplicado a la propiedad 
f ilistyle, como un color regular. 

Note que las posiciones del gradiente son correspondientes al lienzo, no a las figuras 
que queremos afectar. El resultado es que si movemos los rectangulos dibujados al final 
de la funcion hacia una nueva posicion, el gradiente para esos triangulos cambiara. 

Hagalo usted mismo: El gradiente radial es similar al de CSS3. Intente reemplazar 
el gradiente lineal en el codigo del Listado 7-5 por un gradiente radial usando una 
expresion como createRadialGradient(0,0,30,0,0,300). Tambien puede 
experimentar moviendo los rectangulos de posicion para ver como el gradiente 
es aplicado a estas figuras. 

Creando trazados 

Los metodos estudiados hasta el momento dibujan directamente en el lienzo, pero ese no es 
siempre el caso. Normalmente tendremos que procesar figuras en segundo piano y una vez 
que el trabajo este hecho enviar el resultado al contexto para que sea dibujado. Con este 
proposito, API Canvas introduce varios metodos con los que podremos generar trazados. 

Un trazado es como un mapa a ser seguido por el lapiz. Una vez declarado, el trazado 
sera enviado al contexto y dibujado de forma permanente en el lienzo. El trazado puede 
incluir diferentes tipos de lineas, como lineas rectas, arcos, rectangulos, entre otros, para 
crear figuras complejas. 

Existen dos metodos para comenzar y cerrar el trazado: 

beginPath() Este metodo comienza la descripcion de una nueva figura. Es llamado en 
primer lugar, antes de comenzar a crear el trazado. 
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closePath() Este metodo cierra el trazado generando una Ifnea recta desde el ultimo 
punto hasta el punto de origen. Puede ser ignorado cuando utilizamos el metodo 
f ill () para dibujar el trazado en el lienzo. 

Tambien contamos con tres metodos para dibujar el trazado en el lienzo: 

stroke() Este metodo dibuja el trazado como una figura vacfa (solo el contorno). 
fill() Este metodo dibuja el trazado como una figura solida. Cuando usamos este metodo 
no necesitamos cerrar el trazado con closePathO, el trazado es automaticamente 
cerrado con una Ifnea recta trazada desde el punto final hasta el origen. 
clip() Este metodo declara una nueva area de corte para el contexto. Cuando el contexto 
es inicializado, el area de corte es el area completa ocupada por el lienzo. El metodo 
clipO cambiara el area de corte a una nueva forma creando de este modo una 
mascara. Todo lo que caiga fuera de esa mascara no sera dibujado. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.beginPath(); 

// aqui va el trazado 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-6. Reglas basicas para trabajar con trazados. 

El codigo del Listado 7-6 no crea absolutamente nada, solo incorpora los metodos 
necesarios para iniciar y luego dibujar el trazado en pantalla. Para crear el trazado y la 
figura real que sera enviada al contexto y dibujada en el lienzo, contamos con varios 
metodos disponibles: 

moveTo(x, y) Este metodo mueve el lapiz a una posicion especifica para continuar con el 
trazado. Nos permite comenzar o continuar el trazado desde diferentes puntos, 
evitando lineas continuas. 

lineTo(x, y) Este metodo genera una linea recta desde la posicion actual del lapiz hasta la 
nueva declarada por los atributos x e y. 

rect(x, y, ancho, alto) Este metodo genera un rectangulo. A diferencia de los metodos 
estudiados anteriormente, este generara un rectangulo que formara parte del trazado 
(no directamente dibujado en el lienzo). Los atributos tienen la misma funcion. 
arc(x, y, radio, angulo inicio, angulo final, direccion) Este metodo genera un arco o un 
cfrculo en la posicion x e y, con un radio y desde un angulo declarado por sus atributos. 
El ultimo valor es un valor booleano (falso o verdadero) para indicar la direccion a favor o 
en contra de las agujas del reloj. 
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quadraticCurveTo(cpx, cpy, x, y) Este metodo genera una curva Bezier cuadratica desde la 
posicion actual del lapiz hasta la posicion declarada por los atributos x e y. Los 
atributos cpx y cpy indican el punto que dara forma a la curva. 
bezierCurveTo(cplx, cply, cp2x, cp2y, x, y) Este metodo es similar al anterior pero agrega 
dos atributos mas para generar una curva Bezier cubica. Ahora disponemos de dos 
puntos para moldear la curva, declarados por los atributos cpix, cply, cp2x y cp2y. 

Veamos un trazado sencillo para entender como funcionan: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 
lienzo.beginPathO ; 

lienzo.moveTo(100,100); 
lienzo.lineTo(200,200); 
lienzo.lineTo(100,200); 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-7. Nuestro primer trazado. 

Recomendamos siempre establecer la posicion inicial del lapiz inmediatamente 
despues de iniciar el trazado con beginPathO. En el codigo del Listado 7-7 el primer 
paso fue mover el lapiz a la posicion 100,100 y luego generar una linea desde ese punto 
hasta el punto 200,200. Ahora la posicion del lapiz es 200,200 y la siguiente linea sera 
generada desde aqui hasta el punto 100,200. Finalmente, el trazado es dibujado en el 
lienzo como una forma vacia con el metodo stroke 0 . 

Si prueba el codigo en su navegador, vera un triangulo abierto en la pantalla. Este 
triangulo puede ser cerrado o incluso rellenado y transformado en una figura solida 
usando diferentes metodos, como vemos en el siguiente ejemplo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext('2d'); 

lienzo.beginPathO ; 

lienzo.moveTo(100,100); 

lienzo.lineTo(200,200); 

lienzo.lineTo(100,200); 

lienzo.closePathO ; 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-8. Completando el triangulo. 
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El metodo ciosePathO simplemente agrega una linea recta al trazado, desde el 
ultimo al primer punto, cerrando la figura. 

Usando el metodo stroke () al final de nuestro trazado dibujamos un triangulo vacio 
en el lienzo. Para lograr una figura solida, este metodo debe ser reemplazado por fill (): 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 

lienzo=elemento.getContext('2d'); 

lienzo.beginPathO ; 

lienzo.moveTo(100,100); 

lienzo.lineTo(200,200); 

lienzo.lineTo(100,200); 

lienzo.fill 0; 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-9. Triangulo solido. 

Ahora la figura en la pantalla sera un triangulo solido. El metodo fill() cierra el 
trazado automaticamente, por lo que ya no tenemos que usar ciosePathO para 
lograrlo. 

Uno de los metodos mencionados anteriormente para dibujar un trazado en el lienzo 
fue clipO. Este metodo en realidad no dibuja nada, lo que hace es crear una mascara 
con la forma del trazado para seleccionar que sera dibujado y que no. Todo lo que caiga 
fuera de la mascara no se dibujara en el lienzo. Veamos un ejemplo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d 1 ); 

lienzo.beginPathO ; 
lienzo.moveTo(100,100); 
lienzo.lineTo(200,200); 
lienzo.lineTo(100,200); 

lienzo.clip(); 

lienzo.beginPath(); 
for(f = 0; f < 3 0 0; f = f + 10){ 
lienzo.moveTo(0,f); 
lienzo.lineTo(500,f); 

} 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-10. Usando el triangulo anterior como una mascara. 
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Para mostrar exactamente como funciona el metodo clipO, en el Listado 7-10 
utilizamos un bucle for para crear Ifneas horizontales cada 10 pixeles. Estas Ifneas van 
desde el lado izquierdo al lado derecho del lienzo, pero solo las partes de las Ifneas que 
caen dentro de la mascara (el triangulo) seran dibujadas. 

Ahora que ya sabemos como dibujar trazados, es tiempo de ver el resto de las 
alternativas con las que contamos para crearlos. Hasta el momento hemos estudiado 
como generar Ifneas rectas y formas rectangulares. Para figuras circulares, la API provee 
tres metodos: arc(), quadraticCurveTo () y bezierCurveTo (). El primero es 
relativamente sencillo y puede generar cfrculos parciales o completos, como mostramos 
en el siguiente ejemplo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d 1 ); 
lienzo.beginPathf); 

lienzo.arc (100,100,50,0 ,Math.PI*2, false); 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-11. Circulos con arc (). 

Lo primero que seguramente notara en el metodo arc () en nuestro ejemplo es el uso 
del valor pi. Este metodo usa radianes en lugar de grados para los valores del angulo. En 
radianes, el valor pi representa 180 grados, por lo que la formula pi *2 multiplica pi por 
2 obteniendo un angulo de 360 grados. 

El codigo en el Listado 7-11 genera un arco con centro en el punto 100,100 y un radio 
de 50 pixeles, comenzando a 0 grados y terminando a Math.Pi*2 grados, lo que 
representa un cfrculo completo. El uso de la propiedad pi del objeto Math nos permite 
obtener el valor preciso de PI. 

Si necesitamos calcular el valor en radianes de cualquier angulo en grados usamos la 
formula: Math, pi / 180 x grados, como en el proximo ejemplo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext('2d'); 

lienzo.beginPathO ; 

var radianes=Math.PI/180*45; 

lienzo.arc(100,100,50,0,radianes, false); 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-12. Un arco de 45 grados. 
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Con el codigo del Listado 7-12 obtenemos un arco que cubre 45 grados de un drculo. 
Intente cambiar el valor de la direccion a true (verdadero). En este caso, el arco sera 
generado desde 0 grados a 315, creando un drculo abierto. 

Una cosa importante a considerar es que si continuamos construyendo el trazado 
luego del arco, el actual punto de comienzo sera el final del arco. Si no deseamos que esto 
pase tendremos que usar el metodo moveToO para cambiar la posicion del lapiz, como 
hicimos anteriormente. Sin embargo, si la proxima figura es otro arco (por ejemplo, un 
drculo completo) siempre recuerde que el metodo moveToO mueve el lapiz virtual hacia 
el punto en el cual el drculo comenzara a ser dibujado, no el centro del drculo. Digamos 
que el centro del drculo que queremos dibujar se encuentra en el punto 300,150 y su 
radio es de 50. El metodo moveToO deberfa mover el lapiz a la posicion 350,150 para 
comenzar a dibujar el drculo. 

Ademas de arc 0 , existen dos metodos mas para dibujar curvas, en este caso curvas 
complejas. El metodo quadraticCurveTo () genera una curva Bezier cuadratica, y el 
metodo bezierCurveTo () es para curvas Bezier cubicas. La diferencia entre estos dos 
metodos es que el primero cuenta con un solo punto de control y el segundo con dos, 
creando de este modo diferentes tipos de curvas. 


function iniciarO{ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d 1 ); 
lienzo.beginPath(); 
lienzo.moveTo(50,50); 

lienzo.quadraticCurveTo(100,125, 50,200); 

lienzo.moveTo(250,50); 

lienzo.bezierCurveTo(200,125, 300,125, 250,200); 

lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-13. Curvas complejas. 

Para la curva cuadratica movimos el lapiz virtual a la posicion 50,50 y finalizamos la 
curva en el punto 50,200. El punto de control para esta curva fue ubicado en la posicion 
100,125. 

La curva generada por el metodo bezierCurveTo () es un poco mas compleja. Hay 
dos puntos de control para esta curva, el primero en la posicion 200,125 y el segundo en 
la posicion 300,125. 

Los valores en la Figura 7-2 indican los puntos de control para las curvas. Moviendo 
estos puntos cambiamos la forma de la curva. 
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0 pixeles - > 500 



Hagalo usted mismo: Puede agregar tantas curvas como necesite para construir su 
figura. Intente cambiar los valores de los puntos de control en el Listado 7-13 para ver 
como afectan a las curvas. Construya figuras mas complejas combinando curvas y 
lineas para entender como la construccion del trazado es realizada. 

Estilos de linea 

Hasta esta parte del capitulo hemos usado siempre los mismos estilos de lineas. El ancho, 
la terminacion y otros aspectos de la linea pueden ser modificados para obtener 
exactamente el tipo de linea que necesitamos para nuestros dibujos. 

Existen cuatro propiedades especificas para este proposito: 

lineWidth Esta propiedad determina el grosor de la linea. Por defecto el valor es 1.0 
unidades. 

lineCap Esta propiedad determina la forma de la terminacion de la linea. Puede recibir uno 
de estos tres valores: butt, round y square. 
lineJoin Esta propiedad determina la forma de la conexion entre dos lineas. Los valores 
posibles son: round, bevel y miter. 

miterLimit Trabajando en conjunto con lineJoin, esta propiedad determina cuanto la 
conexion de dos lineas sera extendida cuando la propiedad lineJoin es declarada 
con el valor miter. 

Las propiedades afectaran el trazado completo. Cada vez que tenemos que cambiar las 
caracteristicas de las lineas debemos crear un nuevo trazado. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo 1 }; 
lienzo=elemento.getContext('2d 1 ); 
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lienzo.beginPath()f 

lienzo.arc(200,150,50,0,Math.PI*2, false); 
lienzo.stroke(); 

lienzo.lineWidth=10; 
lienzo.lineCap="round"; 

lienzo.beginPath(); 
lienzo.moveTo(230,150); 

lienzo.arc(200,150,30,0,Math.PI, false); 
lienzo.stroke(); 

lienzo.lineWidth=5; 
lienzo.lineJoin="miter"; 

lienzo.beginPath(); 
lienzo.moveTo(195,135); 
lienzo.lineTo(215,155); 
lienzo.lineTo(195,155); 
lienzo.stroke(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-14. Propiedades para probar diferentes estilos de linea. 

Comenzamos el dibujo en el codigo del Listado 7-14 creando un trazado para un drculo 
completo con propiedades por defecto. Luego, usando linewith, cambiamos el ancho de la 
linea a 10 y definimos la propiedad lineCap como round. Esto hara que el siguiente trazado 
sea mas grueso y con terminaciones redondeadas. Para crear un trazado con estas 
caracteristicas, primero movimos el lapiz a la posicion 230,150 y luego generamos un 
semicfrculo. Los extremos redondeados nos ayudaran a simular una boca sonriente. 

Finalmente, agregamos un trazado creado con dos lineas para lograr una forma similar 
a una nariz. Las llneas para este trazado fueron configuradas con un ancho de 5 y seran 
unidas de acuerdo a la propiedad lineJoin y su valor miter. Esta propiedad hara a la 
nariz lucir puntiaguda, expandiendo las puntas de las Ifneas en la union hasta que ambas 
alcancen un punto en comun. 

Hagalo usted mismo: Experimente con las Ifneas para la nariz modificando la 
propiedad miterLimit (por ejemplo, con la instruction miterLimit=2). Cambie 
el valor de la propiedad lineJoin a round o bevel. Tambien puede modificar la 
forma de la boca probando diferentes valores para la propiedad lineCap. 


Texto 

Escribir texto en el lienzo es tan simple como definir unas pocas propiedades y llamar al 
metodo apropiado. Tres propiedades son ofrecidas para configurar texto: 

font Esta propiedad tiene una sintaxis similar a la propiedad font de CSS, y acepta los 
mismos valores. 
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textAlign Esta propiedad alinea el texto. Existen varios valores posibles: start 
(comienzo), end (final), left (izquierda), right (derecha) y center (centro). 
textBaseline Esta propiedad es para alineamiento vertical. Establece diferentes posiciones 
para el texto (incluyendo texto Unicode). Los posibles valores son: top, hanging, 
middle, alphabetic, ideographic y bottom. 

Dos metodos estan disponibles para dibujar texto en el lienzo: 

strokeText(texto, x, y) Del mismo modo que el metodo stroke 0 para el trazado, este 
metodo dibujara el texto especificado en la posicion x,y como una figura vada (solo 
los contornos). Puede tambien incluir un cuarto valor para declarar el tamano maximo. 
Si el texto es mas extenso que este ultimo valor, sera encogido para caber dentro del 
espacio establecido. 

fillText(texto, x, y) Este metodo es similar al metodo anterior excepto que esta vez el 
texto dibujado sera solido (igual que la funcion para el trazado). 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d 1 ); 

lienzo.font="bold 24px verdana, sans-serif"; 

lienzo.textAlign="start"; 

lienzo.fillText("Mi mensaje", 100,100); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-15. Dibujando texto. 

Como podemos ver en el Listado 7-15, la propiedad font puede tomar varios valores a 
la vez, usando exactamente la misma sintaxis que CSS. La propiedad textAling hace que 
el texto sea dibujado desde la posicion 100,100 (si el valor de esta propiedad fuera end, 
por ejemplo, el texto terminaria en la posicion 100 , 100 ). Finalmente, el metodo 
fillText dibuja un texto solido en el lienzo. 

Ademas de los previamente mencionados, la API provee otro metodo importante para 
trabajar con texto: 

measureText() Este metodo retorna information sobre el tamano de un texto espedfico. 
Puede ser util para combinar texto con otras formas en el lienzo y calcular posiciones o 
incluso colisiones en animaciones. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d'); 


158 



API Canvas 


lienzo.font="bold 24px verdana, sans-serif"; 

lienzo.textAlign="start"; 

lienzo.textBaseline="bottom"; 

lienzo.fillText("Mi mensaje", 100,124); 

var tamano=lienzo.measureText("Mi mensaje"); 

lienzo.strokeRect(100,100,tamano.width,24); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-16. Midiendo texto. 

En este ejemplo comenzamos con el mismo codigo del Listado 7-15, pero agregamos 
un alineamiento vertical. La propiedad textBaseline fue establecida como bottom 
(inferior), lo que significa que la base o parte inferior del texto estara ubicada en la 
posicion 124 . Esto nos ayudara a conocer la posicion vertical exacta del texto en el lienzo. 

Usando el metodo measureText 0 y la propiedad width (ancho) obtenemos el 
tamano horizontal del texto. Con esta medida estamos listos para dibujar un rectangulo 
que rodeara al texto. 

Hagalo usted mismo: Utilizando el codigo del Listado 7-16, pruebe diferentes valores 
para las propiedades textAlign y textBaseline. Use el rectangulo como 
referencia para comprobar como estas propiedades trabajan. Escriba un texto 
diferente para vercomo el rectangulo se adapta automaticamente a su tamano. 

Sombras 

Por supuesto, sombras son tambien una parte importante de Canvas API. Podemos 
generar sombras para cada trazado e incluso textos. La API provee cuatro propiedades 
para hacerlo: 

shadowColor Esta propiedad declara el color de la sombra usando sintaxis CSS. 
shadowOffsetX Esta propiedad recibe un numero para determinar que tan lejos la sombra 
estara ubicada del objeto (direccion horizontal). 
shadowOffsetY Esta propiedad recibe un numero para determinar que tan lejos la sombra 
estara ubicada del objeto (direccion vertical). 
shadowBlur Esta propiedad produce un efecto de difuminacion para la sombra. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d'); 

lienzo.shadowColor="rgba(0,0,0,0.5) 
lienzo.shadowOffsetX=4; 
lienzo.shadowOffsetY=4; 
lienzo.shadowBlur=5; 
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lienzo.font="bold 50px verdana, sans-serif"; 
lienzo.fillText("Mi mensaje ", 100,100); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-17. Aplicando sombras. 

La sombra creada en el Listado 7-17 usa la funcion rgba() para obtener un color 
negro semitransparente. Es desplazada 4 pixeles del objeto y tiene un valor de 
difuminacion de 5. 

Hagalo usted mismo: Aplique sombras a otra figura en lugar de texto. Por 
ejemplo, pruebe generar sombras para figuras vacfas y solidas, usando 
rectangulos o drculos. 

Transformaciones 

LA API Canvas ofrece operaciones complejas que es posible aplicar sobre el lienzo para afectar 
los graficos que luego son dibujados en el. Estas operaciones son realizadas utilizando cinco 
metodos de transformacion diferentes, cada uno para un proposito espedfico. 

translated, y) Este metodo de transformacion es usado para mover el origen del lienzo. 
Cada lienzo comienza en el punto 0,0 localizado en la esquina superior izquierda, y los 
valores se incrementan en cualquier direccion dentro del lienzo. Valores negativos 
caen fuera del lienzo. A veces es bueno poder usar valores negativos para crear figuras 
complejas. El metodo translated nos permite mover el punto 0,0 a una posicion 
espedfica para usar el origen como referencia para nuestros dibujos o para aplicar 
otras transformaciones. 

rotate(angulo) Este metodo de transformacion rotara el lienzo alrededor del origen tantos 
angulos como sean especificados. 

scale(x, y) Este metodo de transformacion incrementa o disminuye las unidades de la 
grilla para reducir o ampliar todo lo que este dibujado en el lienzo. La escala puede ser 
cambiada independientemente para el valor horizontal o vertical usando los atributos 
x e y. Los valores pueden ser negativos, produciendo un efecto de espejo. Por defecto 
los valores son iguales a 1.0. 

transform(ml, m2, m3, m4, dx, dy) El lienzo contiene una matriz de valores que 
especifican sus propiedades. El metodo transform () aplica una nueva matriz sobre 
la actual para modificar el lienzo. 

setTransform(ml, m2, m3, m4, dx, dy) Este metodo reinicializa la actual matriz de 
transformacion y establece una nueva desde los valores provistos en sus atributos. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
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lienzo=elemento.getContext('2d 1 ); 

lienzo.font="bold 20px verdana, sans-serif"; 

lienzo.fillText("PRUEBA",50,20); 

lienzo.translate (50,70) ; 
lienzo.rotate(Math. PI/180*45) ; 
lienzo.fillText("PRUEBA",0,0); 
lienzo.rotate(-Math. PI/180*45) ; 
lienzo.translate(0,100); 
lienzo.scale(2,2); 
lienzo.fillText("PRUEBA",0,0); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-18. Moviendo, rotando y escalando. 

No hay mejor forma de entender como funcionan las transformaciones que usarlas en 
nuestro codigo. En el Listado 7-18, aplicamos los metodos translate 0, rotate () y 
scale () al mismo texto. Primero dibujamos un texto en el lienzo con la configuration por 
defecto. El texto aparecera en la posicion 50,20 con un tamano de 20 pixeles. Luego de 
esto, usando translate (), el origen del lienzo es movido a la posicion 50,70 y el lienzo 
complete es rotado 45 grados con el metodo rotate 0 . Otro texto es dibujado en el nuevo 
origen, con una inclination de 45 grados. Las transformaciones aplicadas se vuelven los 
valores por defecto, por lo tanto antes de aplicar el siguiente metodo scale 0 rotamos el 
lienzo 45 grados negativos para ubicarlo en su posicion original. Realizamos una 
transformacion mas moviendo el origen otros 100 pixeles hacia abajo. Finalmente, la escala 
del lienzo es duplicada y un nuevo texto es dibujado al doble del tamano de los anteriores. 

Cada transformacion es acumulativa. Si realizamos dos transformaciones usando 
scale (), por ejemplo, el segundo metodo realizara el escalado considerando el estado 
actual del lienzo. Una orden scale(2,2) luego de otra scale(2,2) cuadruplicara la 
escala del lienzo. Y para los metodos de transformacion de la matriz, esta no es una 
excepcion. Es por esto que contamos con dos metodos para realizar esta clase de 
transformaciones: transform () y setTransformO . 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 

lienzo=elemento.getContext('2d 1 ); 

lienzo.transform(3,0,0,1,0,0); 

lienzo.font="bold 20px verdana, sans-serif"; 

lienzo.fillText("PRUEBA",20,20); 

lienzo.transform(1,0,0,10,0,0); 

lienzo.font="bold 20px verdana, sans-serif"; 

lienzo.fillText("PRUEBA",100,20); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-19. Transformaciones acumulativas sobre la matriz. 
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Al igual que en el codigo anterior, en el Listado 7-19 aplicamos varios metodos de 
transformacion sobre el mismo texto para comparar efectos. Los valores por defecto de la 
matriz del lienzo son 1,0,0,1,0,0. Cambiando el primer valor a 3, en la primera 
transformacion de nuestro ejemplo arriba, estiramos el lienzo horizontalmente. El texto 
dibujado luego de esta transformacion sera mas ancho que en condiciones por defecto. 

Con la siguiente transformacion, el lienzo fue estirado verticalmente cambiando el 
cuarto valor a 10 y preservando los anteriores. 

Un detalle importante a recordar es que las transformaciones son aplicadas sobre la 
matriz declarada en previas transformaciones, por lo que el segundo texto mostrado por 
el codigo del Listado 7-19 sera igual de ancho que el anterior (es estirado horizontal y 
verticalmente). Para reinicializar la matriz y declarar nuevos valores de transformacion, 
podemos usarel metodo setTransformO . 

Hagalo usted mismo: Reemplace el ultimo metodo transform () en el ejemplo 
por setTransformO y compruebe los resultados. Usando solo un texto, cambie 
cada valor en el metodo transform () para conocer la clase de transformacion 
realizada en el lienzo por cada uno de ellos. 

Restaurando el estado 

La acumulacion de transformaciones hace realmente dificil volver a anteriores estados. En 
el codigo del Listado 7-18, por ejemplo, tuvimos que recordar el valor de rotacion usado 
previamente para poder realizar una nueva rotacion y volver el lienzo al estado original. 
Considerando situaciones como esta, Canvas API provee dos metodos para grabar y 
recuperar el estado del lienzo. 

save() Este metodo graba el estado del lienzo, incluyendo transformaciones ya aplicadas, 
valores de propiedades de estilo y la actual mascara (el area creada por el metodo 
clipO, si existe). 

restore() Este metodo recupera el ultimo estado grabado. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 

lienzo=elemento.getContext('2d'); 

lienzo.save(); 

lienzo.translate(50,70); 

lienzo.font="bold 20px verdana, sans-serif"; 

lienzo.fillText("PRUEBA1",0,3 0) ; 

lienzo.restore(); 

lienzo.fillText("PRUEBA2",0,30); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-20. Grabando el estado del lienzo. 
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Si ejecuta el codigo del Listado 7-20 en su navegador, vera el texto "PRUEBA1" en 
grandes letras al centro del lienzo, y el texto "PRUEBA2" en letras pequenas, cercano al 
origen. Lo que hicimos fue grabar el estado por defecto del lienzo y luego establecer una 
nueva posicion para el origen y estilos para el texto. El primer texto es dibujado con esta 
configuracion, pero antes de dibujar el segundo texto el estado original es restaurado, por 
lo que este texto es mostrado con los estilos por defecto, no con los declarados para el 
primero. 

No importa cuantas transformaciones hayamos realizado, luego de llamar al metodo 
restore 0 la configuracion del lienzo sera retornada exactamente a su estado anterior 
(el ultimo grabado). 

globalCompositeOperation 

Cuando hablamos de trazados dijimos que existe una propiedad para determinar como 
una figura es posicionada y combinada con figuras dibujadas previamente en el lienzo. La 
propiedad es globalCompositeOperation y su valor por defecto es source-over, lo 
que significa que la nueva figura sera dibujada sobre las que ya existen en el lienzo. La 
propiedad ofrece 11 valores mas: 

source-in Solo la parte de la nueva figura que se sobrepone a las figuras previas es 

dibujada. El resto de la figura, e incluso el resto de las figuras previas, se vuelven 

transparentes. 

source-out Solo la parte de la nueva figura que no se sobrepone a las figuras previas es 

dibujada. El resto de la figura, e incluso el resto de las figuras previas, se vuelven 

transparentes. 

source-atop Solo la parte de la nueva figura que se superpone con las figuras previas es 
dibujada. Las figuras previas son preservadas, pero el resto de la nueva figura se vuelve 
transparente. 

lighter Ambas figuras son dibujadas (nueva y vieja), pero el color de las partes que se 
superponen es obtenido adicionando los valores de los colores de cada figura. 
xor Ambas figuras son dibujadas (nueva y vieja), pero las partes que se superponen se 
vuelven transparentes. 

destination-over Este es el opuesto del valor por defecto. Las nuevas figuras son dibujadas 
detras de las viejas que ya se encuentran en el lienzo. 
destination-in Las partes de las figuras existentes en el lienzo que se superponen con la 
nueva figura son preservadas. El resto, incluyendo la nueva figura, se vuelven 
transparentes. 

destination-out Las partes de las figuras existentes en el lienzo que no se superponen con 
la nueva figura son preservadas. El resto, incluyendo la nueva figura, se vuelven 
transparentes. 

destination-atop Las figuras existentes y la nueva son preservadas solo en la parte en la 
que se superponen. 
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darker Ambas figuras son dibujadas, pero el color de las partes que se superponen es 
determinado substrayendo los valores de los colores de cada figura. 
copy Solo la nueva figura es dibujada. Las ya existentes se vuelven transparentes. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo 1 ); 
lienzo=elemento.getContext('2d'); 
lienzo.fillStyle="#990000"; 
lienzo.fillRect(100,100,300,100); 

lienzo.globalCompositeOperation="destination-atop"; 

lienzo.fillStyle="#AAAAFF"; 

lienzo.font="bold 80px verdana, sans-serif"; 
lienzo.textAlign="center"; 
lienzo.textBaseline="middle"; 
lienzo.fillText("PRUEBA",250,110); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-21. Probando la propiedad globalCompositeOperation. 

Solo representaciones visuales de cada posible valor para la propiedad 
globalCompositeOperation le ayudaran a comprender como funcionan. Con este 
proposito, preparamos el codigo del Listado 7-21. Cuando este codigo es ejecutado, un 
rectangulo rojo es dibujado en el medio del lienzo, pero gracias al valor destination- 
atop solo la parte del rectangulo que se superpone con el texto es dibujada. 

Hagalo usted mismo: Reemplace el valor destination-atop con cualquiera de 
los demas valores posibles para esta propiedad y compruebe el resultado en su 
navegador. Pruebe el codigo en distintos navegadores. 


7.3 Procesando imageries 

API Canvas no seria nada sin la capacidad de procesar imagenes. Pero incluso cuando las 
imagenes son un elemento tan importante para una aplicacion grafica, solo un metodo 
nativo fue provisto para trabajar con ellas. 

drawlmage() 

El metodo drawimage () es el unico a cargo de dibujar una imagen en el lienzo. Sin 
embargo, este metodo puede recibir un numero de valores que producen diferentes 
resultados. Estudiemos estas posibilidades: 
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drawlmage(imagen, x, y) Esta sintaxis es para dibujar una imagen en el lienzo en la posicion 
declarada por x e y. El primer valor es una referenda a la imagen que sera dibujada. 
drawlmage(imagen, x, y, ancho, alto) Esta sintaxis nos permite escalar la imagen antes de 
dibujarla en el lienzo, cambiando su tamano con los valores de los atributos ancho y alto. 
drawlmage(imagen, xl, yl, anchol, altol, x2, y2, ancho2, alto2) Esta es la sintaxis mas 
compleja. Hay dos valores para cada parametro. El proposito es cortar partes de la 
imagen y luego dibujarlas en el lienzo con un tamano y una posicion espedfica. Los 
valores xl e yl declaran la esquina superior izquierda de la parte de la imagen que 
sera cortada. Los valores anchol y altol indican el tamano de esta pieza. El resto de 
los valores (x2, y2, ancho2 y aito2) declaran el lugar donde la pieza sera dibujada en 
el lienzo y su nuevo tamano (el cual puede ser igual o diferente al original). 

En cada caso, el primer atributo puede ser una referencia a una imagen en el mismo 
documento generada por metodos como getEiementByidO, o creando un nuevo 
objeto imagen usando metodos regulares de Javascript. No es posible usar una URL o 
cargar un archivo desde una fuente externa directamente con este metodo. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d 1 ); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/snow.jpg"; 
imagen.addEventListener("load", function(){ 

1ienz o.drawlmage(imagen,2 0,2 0) 

}, false); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-22. Trabajando con imagenes. 

Comencemos con un simple ejemplo. El codigo del Listado 7-22 lo unico que hace es 
cargar la imagen y dibujarla en el lienzo. Debido a que el lienzo solo puede dibujar 
imagenes que ya estan completamente cargadas, necesitamos controlar esta situacion 
escuchando al evento load. Agregamos una escucha para este evento y declaramos una 
funcion anonima para responder al mismo. El metodo drawimageO dentro de esta 
funcion dibujara la imagen cuando fue completamente cargada. 

Conceptos basicos: En el Listado 7-22, dentro del metodo addEventListener (), 
usamos una funcion anonima en lugar de una referencia a una funcion normal. En 
casos como este, cuando la funcion es pequena, esta tecnica vuelve al codigo mas 
simple y facil de entender. Para aprender mas sobre este tema, vaya a nuestro sitio 
web y visite los enlaces correspondientes a este capitulo. 


165 



El gran libro de HTML5, CSS3 y Javascript 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/snow.jpg"; 
imagen.addEventListener("load", function(){ 

lienzo.drawlmage(imagen,0,0,elemento.width,elemento.height) 

}, false); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-23. Ajustando la imagen al tamaho del lienzo. 

En el Listado 7-23, agregamos dos valores al metodo drawlmage () utilizado 
previamente para cambiar el tamano de la imagen. Las propiedades width y height 
retornan las medidas del lienzo, por lo que la imagen sera estirada por este codigo hasta 
cubrir el lienzo por completo. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d'); 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/snow.jpg"; 
imagen.addEventListener("load", function(){ 

lienzo.drawlmage(imagen,135,30,50,50,0,0,200,200) 

}, false); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-24. Extrayendo, cambiando el tamaho y dibujando. 

En el Listado 7-24 el codigo presenta la sintaxis mas compleja del metodo drawlmage (). 
Nueve valores fueron provistos para obtener una parte de la imagen original, cambiar su 
tamano y luego dibujarla en el lienzo. Tomamos un cuadrado de la imagen original desde la 
posicion 135,50, con un tamano de 50,50 pixeles. Este bloque es redimensionado a 
200,200 pixeles yfinalmente dibujado en el lienzo en la posicion o,o. 

Datos de imageries 

Cuando dijimos previamente que drawlmage () era el unico metodo disponible para 
dibujar imagenes en el lienzo, mentimos. Existen unos poderosos metodos para procesar 
imagenes en esta API que ademas pueden dibujarlas en el lienzo. Debido a que estos 



API Canvas 


metodos no trabajan con imagenes sino con datos, nuestra declaracion previa sigue 
siendo legftima. iPero por que desearfamos procesar datos en lugar de imagenes? 

Toda imagen puede ser representada por una sucesion de numeros enteros 
representando valores rgba (cuatro valores para cada pixel). Un grupo de valores con esta 
informacion resultara en un array unidimensional que puede ser usado luego para generar 
una imagen. La API Canvas ofrece tres metodos para manipular datos y procesar imagenes 
de este modo: 

getlmageData(x, y, ancho, alto) Este metodo toma un rectangulo del lienzo del tamano 
declarado por sus atributos y lo convierte en datos. Retorna un objeto que puede ser 
luego accedido por sus propiedades width, height y data. 
putlmageData(datoslmagen, x, y) Este metodo convierte a los datos en datosimagen en 
una imagen y dibuja la imagen en el lienzo en la posicion especificada por x e y. Este es 
el opuesto a getlmageData (). 

createlmageData(ancho, alto) Este metodo crea datos para representar una imagen vada. 
Todos sus pixeles seran de color negro transparente. Puede tambien recibir datos 
como atributo (en lugar de los atributos ancho y alto) y utilizar las dimensiones 
tomadas de los datos provistos para crear la imagen. 

La posicion de cada valor en el array es calculada con la formula 
(anchox4xy) + (xx4) . Este sera el primer valor del pixel (rojo); para el resto tenemos que 
agregar 1 al resultado (por ejemplo, (anchox4xy) + (xx4)+1 para verde, 
(anchox4xy) + (xx4) +2 para azul, y (anchox4xy) + (xx4) +3 para el valor alpha 
(transparencia). Veamos esto en practica: 

IMPORTANTE: Debido a restricciones de seguridad, no se puede extraer 
informacion del elemento <canvas> luego de que una imagen tomada desde 
una fuente externa fue dibujada en el lienzo. Solo cuando el documento y la 
imagen corresponden a la misma fuente (URL) el metodo getlmageData () 
trabajara adecuadamente. Por este motivo, para probar este ejemplo tendra que 
descargar la imagen desde nuestro servidor en www.minkbooks.com/ 
content/snow.jpg (o usar una imagen propia), y luego subir esta imagen, el 
archivo HTML y el archivo con el codigo Javascript a su propio servidor. Si 
simplemente trata de ejecutar el siguiente ejemplo en su ordenador sin seguir los 
pasos previos, no funcionara. 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d 1 ); 

var imagen=new Image(); 
imagen.src="snow.jpg"; 

imagen.addEventListener("load", modificarimagen, false); 
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function modificarimagen(e){ 
imagen=e.target,- 
lienzo.drawlmage(imagen,0,0); 
var info=lienzo.getlmageData(0,0,175,262); 

var pos; 

for (x-0 ;x<=l75;x++.) { 
for(y=0;y<=262;y++){ 

pos=(info.width*4*y)+(x*4); 
info.data [pos]=255-info.data [pos]; 
info.data[pos+1]=255-info.data [pos+1] ; 
info.data[pos+2]=255-info.data[pos+2]> 

} 

} 

lienzo.putlmageData(info,0,0); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-25. Generando un negativo de la imagen. 

Esta vez tuvimos que crear una nueva funcion (en lugar de utilizar una funcion 
anonima) para procesar la imagen luego de que es cargada. Primero, la funcion 
modificarimagent) genera una referenda a la imagen aprovechando la propiedad 
target usada en capitulos previos. En el siguiente paso, usando esta referencia y el 
metodo drawlmage (), la imagen es dibujada en el lienzo en la posicion o, 0. No hay nada 
inusual en esta parte del codigo, pero eso es algo que pronto va a cambiar. 

IMPORTANTE: Los archivos para este ejemplo deben ser subidos a su propio 
servidor para trabajar correctamente (incluyendo la imagen snow.jpg que 
puede descargar desde www.minkbooks.com/content/snow.jpg). 

La imagen utilizada en nuestro ejemplo tiene un tamano de 350 pixeles de ancho por 
262 pixeles de alto, por lo que usando el metodo getlmageData () con los valores 0,0 
para la esquina superior izquierda y 175,262 para el valor horizontal y vertical, estamos 
extrayendo solo la mitad izquierda de la imagen original. Estos datos son grabados dentro 
de la variable info. 

Una vez que esta informacion fue recolectada, es momento de manipular cada pixel 
para obtener el resultado que queremos (en nuestro ejemplo esto sera un negativo de 
este trozo de la imagen). 

Debido a que cada color es declarado por un valor entre 0 y 255, el valor negativo es 
obtenido restando el valor real a 255 con la formula color=255-color. Para hacerlo con 
cada pixel de la imagen, debemos crear dos bucles for (uno para las columnas y otro para 
las filas) para obtener cada color original y calcular el valor del negativo correspondiente. 
El bucle for para los valores x va desde 0 a 175 (el ancho de la parte de la imagen que 
extrajimos del lienzo) y el for para los valores y va desde 0 a 262 (el tamano vertical de la 
imagen y tambien el tamano vertical del trozo de imagen que estamos procesando). 



API Canvas 


Luego de que cada pixel es procesado, la variable info con los datos de la imagen es 
enviada al lienzo como una imagen usando el metodo putimageData (). La imagen es 
ubicada en la misma posicion que la original, reemplazando la mitad izquierda de la 
imagen original por el negativo que acabamos de crear. 

El metodo getimageDataO retorna un objeto que puede ser procesado a traves de 
sus propiedades (width, height y data) o puede ser usado integro por el metodo 
putimageData(). 

Existe otra manera de extraer datos del lienzo que retorna el contenido en una cadena 
de texto codificada en base64. Esta cadena puede ser usada luego como fuente para otro 
lienzo, como fuente de un elemento HTML (por ejemplo, <img>), o incluso ser enviado al 
servidor o grabado en un archivo. El siguiente es el metodo incluido con este fin: 

toDataURL(tipo) El elemento <canvas> tiene dos propiedades, width y height, y dos 
metodos: getContextO y toDataURLO. Este ultimo metodo retorna datos en el 
formato data:url conteniendo una representation del contenido del lienzo en formato 
PNG (o el formato de imagen especificado en el atributo tipo). 

Mas adelante en este libro veremos algunos ejemplos de como usar toDataURLO y 
como puede ayudarnos a integrar esta API con otras. 

Conceptos basicos: Los datos del tipo data:url son datos que son presentados en 
forma de cadena de texto y pueden ser incluidos en nuestros documentos como 
si se tratara de datos tornados de fuentes externas (por ejemplo, la fuente para 
imagenes insertadas con la etiqueta <img>). Para mayor informacion, visite 
nuestro sitio web y siga los enlaces correspondientes a este capitulo. 

Patrones 

Los patrones son simples adiciones que pueden mejorar nuestros trazados. Con esta 
herramienta podemos agregar textura a nuestras figuras utilizando una imagen. El 
procedimiento es similar a la creacion de gradientes; los patrones son creados por el 
metodo createPattern () y luego aplicados al trazado como si fuesen un color. 

createPattern(imagen, tipo) El atributo imagen es una referencia a la imagen que vamos 
a usar como patron, y tipo configura el patron por medio de cuatro valores: repeat, 
repeat-x, repeat-y y no-repeat. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento. getContext (' 2d 1 ) ,- 

var imagen=new Image(); 

imagen.src="http://www.minkbooks.com/content/bricks.jpg"; 
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imagen.addEventListener("load", modificarimagen, false); 

} 

function modificarimagen(e){ 
imagen=e.target; 

var patron=lienzo.createPattern(imagen,'repeat'); 
lienzo.fillStyle=patron; 

lienzo.fillRect(0,0,500,300); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-26. Agregando un patron para nuestro trazado. 

Hagalo usted mismo: Experimente con los diferentes valores disponibles para 
createPatternO ytambien utilizando otras figuras. 


7.4 Animaciones en el lienzo 

Las animaciones son creadas por codigo Javascript convencional. No existen metodos para 
ayudarnos a animar figuras en el lienzo, y tampoco existe un procedimiento 
predeterminado para hacerlo. Basicamente, debemos borrar el area del lienzo que 
queremos animar, dibujar las figuras y repetir el proceso una y otra vez. Una vez que las 
figuras son dibujadas no se pueden mover. Solo borrando el area y dibujando las figuras 
nuevamente podemos construir una animacion. Por esta razon, en juegos o aplicaciones 
que requieren grandes cantidades de objetos a ser animados, es mejor usar imagenes en 
lugar de figuras construidas con trazados complejos (por ejemplo, juegos normalmente 
utilizan imagenes PNG, que ademas son utiles por su capacidad de transparencia). 

Existen multiples tecnicas para lograr animaciones en el mundo de la programacion. 
Algunas son simples y otras tan complejas como las aplicaciones para las que fueron 
creadas. Vamos a ver un ejemplo simple utilizando el metodo clearRectO para limpiar 
el lienzo y dibujar nuevamente, generando una animacion con solo una funcion, pero 
siempre recuerde que si su intencion es crear elaborados efectos probablemente debera 
adquirir un libro de programacion avanzada en Javascript antes de siquiera intentarlo. 


function iniciar(){ 

var elemento=document.getElementByld( 1 lienzo'); 
lienzo=elemento. getContext (' 2d 1 ) ,- 

window.addEventListener('mousemove 1 , animacion, false); 

} 

function animacion(e){ 

lienzo.clearRect(0,0,300,500); 

var xraton=e.clientX; 
var yraton=e.clientY; 
var xcentro=220; 
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var ycentro=150; 

var angulo=Math.atan2(xraton-xcentro,yraton-ycentro); 
var x=xcentro+Math.round(Math.sin(angulo)*10); 
var y=ycentro+Math.round(Math.cos(angulo)*10); 

lienzo.beginPath(); 

lienzo.arc(xcentro,ycentro,20,0,Math.PI*2, false); 
lienzo.moveTo(xcentro+70,150); 

lienzo.arc(xcentro+50,150,20,0,Math.PI*2, false); 
lienzo.stroke(); 

lienzo.beginPath(); 

lienzo.moveTo(x+10,y); 

lienzo.arc(x,y,10,0,Math.PI*2, false); 

lienzo.moveTo(x+60,y); 

lienzo.arc(x+50,y,10,0,Math.PI*2, false); 
lienzo.fill(); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-27. Nuestra primera animation. 

El codigo en el Listado 7-27 mostrara dos ojos en pantalla que miran al puntero del 
raton todo el tiempo. Para mover los ojos, debemos actualizar su posicion cada vez que el 
raton es movido. Por este motivo agregamos una escucha para el evento mousemove en la 
funcion iniciar (). Cada vez que el puntero del raton cambia de posicion, el evento es 
disparado y la funcion animacion () es llamada. 

La funcion animacion () comienza limpiando el lienzo con la instruccion 
clearRect (0,0,300,500) . Luego, la posicion del puntero del raton es capturada 
(usando las viejas propiedades clientx y clientY) y la posicion del primer ojo es 
grabada en las variables xcentro e ycentro. 

Luego de que estas variables son inicializadas, es tiempo de comenzar con las 
matematicas. Usando los valores de la posicion del raton y el centro del ojo izquierdo, 
calculamos el angulo de la linea invisible que va desde un punto al otro usando el metodo 
predefinido atan 2 . Este angulo es usado en el siguiente paso para calcular el punto 
exacto del centro del iris del ojo izquierdo con la formula xcentro + 
Math, round (Math, sin (angulo) x 10). El numero 10 en la formula representa la 
distancia desde el centro del ojo al centro del iris (porque el iris no esta en el centro del 
ojo, esta siempre sobre el borde). 

Con todos estos valores podemos finalmente comenzar a dibujar nuestros ojos en el 
lienzo. El primer trazado es para los dos cfrculos representando los ojos. El primer metodo 
arc () para el primer ojo es posicionado en los valores xcentro y ycentro, y el circulo 
para el segundo ojo es generado 50 pixeles hacia la derecha usando la instruccion 
arc(xcentro+50, 150, 20, 0, Math.PI*2, false). 

La parte animada del grafico es creada a continuacion con el segundo trazado. Este 
trazado usa las variables x e y con la posicion calculada previamente a partir del angulo. 
Ambos iris son dibujados como un circulo negro solido usando fill (). 
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El proceso sera repetido y los valores recalculados cada vez que el evento mousemove 
es disparado. 

Hagalo usted mismo: Copie el codigo del Listado 7-27 en el archivo Javascript 
canvas . j s y abra el archivo HTML con la plantilla del Listado 7-1 en su navegador. 


7.5 Procesando video en el lienzo 

Al igual que para animaciones, no hay ningun metodo especial para mostrar video en el 
elemento <canvas>. La unica manera de hacerlo es tomando cada cuadro del video 
desde el elemento <video> y dibujarlo como una imagen en el lienzo usando 
drawimage 0 . Asi que basicamente, el procesamiento de video en el lienzo es hecho con 
la combinacion de tecnicas ya estudiadas. 

Construyamos una nueva plantilla y los codigos para ver de que estamos hablando. 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Video en el Lienzo</title> 

<style> 

. cajas{ 

display: inline-block; 
margin: lOpx; 
padding: 5px; 

border: lpx solid #999999; 

} 

</style> 

<script src="canvasvideo.js"></script> 

</head> 

<body> 

<section class="cajas"> 

<video id="medio" width="483" height="272"> 

<source src="http://www.minkbooks.com/content/trailer2.mp4"> 
<source src="http://www.minkbooks.com/content/trailer2,ogg"> 
</video> 

</section> 

<section class="cajas"> 

<canvas id="lienzo" width="483" height="272"> 

Su navegador no soporta el elemento canvas 
</canvas> 

</section> 

</html> 


Listado 7-28. Plantilla para reproducir video en el lienzo. 
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La plantilla en el Listado 7-28 incluye dos componentes especfficos: el elemento 
<video> y el elemento <canvas>. Con la combinacion de ambos vamos a procesar y 
mostrar video en el lienzo. 

La plantilla tambien incluye estilos CSS embebidos para las cajas y un archivo Javascript 
llamado canvasvideo. j s para el siguiente codigo: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext('2d 1 ); 
video=document.getElementByld('medio'); 
video.addEventListener('click', presionar, false); 

} 

function presionar(){ 

if(!video.paused && !video.ended){ 
video.pause(); 

window.clearlnterval(bucle); 

}else{ 

video.play(); 

bucle=setlnterval(procesarCuadros, 33); 

} 

} 

function procesarCuadros(){ 
lienzo.drawlmage(video,0,0); 

var info=lienzo.getImageData(0,0,483,272); 
var pos; 

for(x=0;x<=483;x++){ 
for(y=0;y<=272;y++){ 

pos=(info.width*4*y)+(x*4); 
gris=parselnt(info.data[pos]*0.2989 + 

info.data[pos+l]*0.5870 + info.data[pos+2]*0.1140); 
info.data[pos]=gris; 
info.data[pos+1] =gris; 
info.data[pos+2]=gris; 

} 

} 

lienzo.putlmageData(info,0,0); 

} 

window.addEventListener("load", iniciar, false); 


Listado 7-29. Video color convertido en bianco y negro. 

Hagalo usted mismo: Cree un nuevo archivo HTML con el codigo del Listado 7-28 
y un archivo Javascript llamado canvasvideo. js con el codigo del Listado 7-29. 
Para comenzar a reproducir el video, haga clic en la caja izquierda en la pantalla. 
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IMPORTANTE: Este ejemplo usa los metodos getlmageData () y putlmageData () 
para procesar datos de imagen. Como explicamos anteriormente, estos metodos 
extraen informacion del lienzo. Debido a restricciones de seguridad, la extraccion de 
informacion desde el lienzo es desactivada luego de que el elemento recibe 
contenido desde un origen que no es el origen del documento que lo creo (el 
documento pertenece a un dominio y el video a otro). Por lo tanto, para probar este 
ejemplo, debera descargar el video desde nuestro sitio web (o usar el suyo propio) y 
luego subir cada uno de los archivos a su servidor. 

Estudiemos por un momento el codigo del Listado 7-29. Como dijimos previamente, 
para procesar video en el lienzo, simplemente debemos recurrir a codigos y tecnicas ya 
vistas. En este codigo estamos usando la funcion presionarO tomada del Capitulo 5 
para comenzar y detener la reproduccion del video haciendo clic sobre el mismo. Tambien 
creamos una funcion llamada procesarCuadros () que esta usando el mismo codigo del 
Listado 7-25 de este capitulo, excepto que esta vez en lugar de invertir la imagen estamos 
usando una formula para transformar todos los colores de cada cuadro del video en el 
correspondiente gris. Esto convertira nuestro video color en un video bianco y negro. 

La funcion presionarO cumple con dos propositos: comenzar o detener la 
reproduccion del video e iniciar un intervalo que ejecutara la funcion 
procesarCuadros 0 cada 33 milisegundos. Esta funcion toma un cuadro del elemento 
<video> y lo dibuja en el lienzo con la instruccion drawimage (video, 0 , 0) . Luego los 
datos son extraidos del lienzo con el metodo getlmageData () y cada pixel de ese cuadro 
es procesado por medio de dos bucles for (como lo hicimos en un ejemplo anterior). 

El proceso utilizado para convertir cada uno de los colores que integran cada pixel en 
su correspondiente gris es uno de los mas populares y faciles de encontrar en Internet. La 
formula es la siguiente: rojo x 0.2989 + verde x 0.5870 + azul x 0.1140. 
Luego de que la formula es calculada, el resultado debe ser asignado a cada color del pixel 
(rojo, verde y azul), como lo hicimos en el ejemplo usando la variable gris. 

El proceso termina cuando dibujamos nuevamente el cuadro modificado en el lienzo 
usando el metodo putlmageData (). 

IMPORTANTE: Este ejemplo es con propositos didacticos. Procesar video en 
tiempo real del modo en que lo hicimos no es una practica recomendada. 
Dependiendo de la configuracion de su ordenador y el navegador que use para 
correr la aplicacion, probablemente note algunas demoras en el proceso. Para 
crear aplicaciones Javascript utiles, siempre debe considerar su rendimiento. 


7.6 Referencia rapida 

La API Canvas es probablemente la mas compleja y extensa de todas las APIs incluidas 
dentro de la especificacion HTML5. Provee varios metodos y propiedades para crear 
aplicaciones graficas sobre el elemento <canvas>. 
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Metodos 

Estos metodos son especificos de la API Canvas: 

getContext(contexto) Este metodo crea el contexto para el lienzo. Puede tomar dos 
valores: 2d y 3d para graficos en 2 y 3 dimensiones. 
fillRect(x, y, ancho, alto) Este metodo dibujara un rectangulo solido directamente en el 
lienzo en la posicion indicada por x,yy el tamano ancho, alto. 
strokeRect(x, y, ancho, alto) Este metodo dibujara un rectangulo vacio (solo el contorno) 
directamente en el lienzo en la posicion indicada porx,y y el tamano ancho, alto. 
clearRect(x, y, ancho, alto) Este metodo borra un area en el lienzo usando una figura 
rectangular declarada por los valores de sus atributos. 
createLinearGradient(xl, yl, x2, y2) Este metodo crea un gradiente lineal para asignarlo a 
una figura como si fuese un color usando la propiedad filistyie. Sus atributos solo 
especifican las posiciones de comienzo y final del gradiente (relativas al lienzo). Para 
declarar los colores involucrados en el gradiente, este metodo debe ser usado en 
combinacion con addColorStop (). 

createRadialGradient(xl, yl, rl, x2, y2, r2) Este metodo crea un gradiente radial para 
asignarlo a una figura como si fuese un color usando la propiedad filistyie. El 
gradiente es construido por medio de dos circulos. Los atributos solo especifican la 
posicion y radio de los circulos (relativos al lienzo). Para declarar los colores 
involucrados en el gradiente, este metodo debe ser usado en combinacion con 
addColorStop (). 

addColorStop(posicion, color) Este metodo es usado para declarar los colores para el 
gradiente. El atributo posicion es un valor entre 0.0 y 1.0, usado para determinar 
donde el color comenzara la degradacion. 
beginPath() Este metodo es requerido para comenzar un nuevo trazado. 
closePath() Este metodo puede ser usado al final de un trazado para cerrarlo. Generara 
una linea recta desde la ultima posicion del lapiz hasta el punto donde el trazado 
comenzo. No es necesario usar este metodo cuando el trazado debe permanecer 
abierto o es dibujado en el lienzo usando fill (). 
stroke() Este metodo es usado para dibujar un trazado como una figura vacia (solo el 
contorno). 

fill() Este metodo es usado para dibujar un trazado como una figura solida. 
clip() Este metodo es usado para crear una mascara a partir de un trazado. Todo lo que 
sea enviado al lienzo luego de que este metodo es declarado sera dibujado solo si cae 
dentro de la mascara. 

moveTo(x, y) Este metodo mueve el lapiz virtual a una nueva posicion para continuar el 
trazado desde ese punto. 

lineTo(x, y) Este metodo agrega lineas rectas al trazado desde la posicion actual del lapiz 
hasta el punto indicado por los atributos x e y. 
rect(x, y, ancho, alto) Este metodo agrega un rectangulo al trazado en la posicion x,y y 
con un tamano determinado por ancho, alto. 
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arc(x, y, radio, angulo inicio, angulo final, direccion) Este metodo agrega un arco al trazado. 
El centro del arco es determinado por x e y, los angulos son definidos en radianes, y la 
direccion es un valor booleano para determinar si el arco sera dibujado en el mismo 
sentido o el opuesto a las agujas del reloj. Para convertir grados en radianes, use la 
formula: Math. Pl/180xgrados. 

quadraticCurveTo(cpx, cpy, x, y) Este metodo agrega una curva Bezier cuadratica al trazado. 
Comienza desde la posicion actual del lapiz y termina en el punto x,y. Los atributos cpxy 
cpy especifican la posicion del punto de control que dara forma a la curva. 
bezierCurveTo(cplx, cply, cp2x, cp2y, x, y) Este metodo agrega una curva Bezier cubica al 
trazado. Comienza desde la posicion actual del lapiz y termina en el punto x,y. Los 
atributos cplx, cply, cp2x, y cp2y especifican la posicion de los dos puntos de 
control que daran forma a la curva. 

strokeText(texto, x, y, maximo) Este metodo dibuja un texto vacio (solo el contorno) 
directamente en el lienzo. El atributo maximo es opcional y determina el maximo 
tamano del texto en pixeles. 

fillText(texto, x, y, maximo) Este metodo dibuja un texto solido directamente en el lienzo. 

El atributo maximo es opcional y determina el maximo tamano del texto en pixeles. 
measureText(texto) Este metodo calcula el tamano del area que un texto ocupara en el 
lienzo usando los estilos vigentes. La propiedad width es usada para retornar el valor, 
translated, y) Este metodo mueve el origen del lienzo al punto x,y. La posicion inicial del 
origen (0,0) es la esquina superior izquierda del area generada por el elemento <canvas>. 
rotate(angle) Este metodo es usado para rotar el lienzo alrededor del origen. El angulo 
debe ser declarado en radianes. Para convertir grados en radianes, use la formula: 
Math.PI/180xgrados. 

scale(x, y) Este metodo cambia la escala del lienzo. Los valores por defecto son (1.0, 1.0). 
Los valores provistos pueden ser negativos. 

transform(ml, m2, m3, m4, dx, dy) Este metodo modifica la matriz de transformacion del 
lienzo. La nueva matriz es calculada sobre la anterior. 
setTransform(ml, m2, m3, m4, dx, dy) Este metodo modifica la matriz de transformacion 
del lienzo. Reinicia los valores anteriores y declara los nuevos. 
save() Este metodo graba el estado del lienzo, incluyendo la matriz de transformacion, 
propiedades de estilo y la mascara. 

restore() Este metodo restaura el ultimo estado del lienzo grabado, incluyendo la matriz 
de transformacion, propiedades de estilo y la mascara. 
drawlmage() Esta metodo dibujara una imagen en el lienzo. Existen tres sintaxis posibles. 
La sintaxis drawimage (imagen,x,y) dibuja la imagen en la posicion x,y. La sintaxis 
drawimage (imagen,x,y, ancho, alto) dibuja la imagen en la posicion x,y con un 
nuevo tamano declarado por ancho, alto. Y la sintaxis drawimage (imagen, xl, 
yl, anchol, altol, x2, y2, ancho2, alto2) toma una porcion de la imagen 
original determinada por xl,yl, anchol,altol y la dibuja en el lienzo en la posicion 
x2,y2 y el nuevo tamano ancho2,alto2. 

getlmageData(x, y, ancho, alto) Este metodo toma una porcion del lienzo y la graba como 
datos en un objeto. Los valores del objeto son accesibles a traves de las propiedades 
width, height y data. Las primeras dos propiedades retornan el tamano de la 
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porcion de la imagen tomada, y data retorna la informacion como un array con 
valores representando los colores de cada pixel. Este valor puede ser accedido usando 
la formula (anchox4xy) + (xx4). 

putlmageData(datoslmagen, x, y) Este metodo dibuja en el lienzo la imagen representada 
por la informacion en datosimagen. 

createlmageData(ancho, alto) Este metodo crea una nueva imagen en formato de datos. 
Todos los pixeles son inicializados en color negro transparente. Puede tomar datos de 
imagen como atributo en lugar de ancho y alto. En este caso la nueva imagen tendra 
el tamano determinado por los datos provistos. 
createPattern(imagen, tipo) Este metodo crea un patron desde una imagen que luego 
podra ser asignado a una figura usando la propiedad filistyie. Los valores posibles 
para el atributo tipo son repeat, repeat-x, repeat-y y no-repeat. 

Propiedades 

La siguiente lista de propiedades es espedfica para la API Canvas: 

strokeStyle Esta propiedad declara el color para las lineas de las figuras. Puede recibir 
cualquier valor CSS, incluidas funciones como rgb () y rgba (). 
fillStyle Esta propiedad declara el color para el interior de figuras solidas. Puede recibir 
cualquier valor CSS, incluidas funciones como rgb () y rgba (). Es tambien usada para 
asignar gradientes y patrones a figuras (estos estilos son primero asignados a una 
variable y luego esa variable es declarada como el valor de esta propiedad). 
globalAlpha Esta propiedad es usada para determinar el nivel de transparencia de las 
figuras. Recibe valores entre 0.0 (completamente opaco) y 1.0 (completamente 
transparente). 

lineWidth Esta propiedad especifica el grosor de la linea. Por defecto el valor es 1.0. 
lineCap - Esta propiedad determina la forma de la terminacion de las lineas. Se pueden 
utilizar tres valores: butt (terminacion normal), round (termina la linea con un 
semicirculo) y square (termina la linea con un cuadrado). 
lineJoin Esta propiedad determina la forma de la conexion entre lineas. Se pueden utilizar 
tres valores: round (la union es redondeada), bevel (la union es cortada) y miter (la 
union es extendida hasta que ambas lineas alcanzan un punto en comun). 
miterLimit Esta propiedad determina cuanto se extenderan las lineas cuando la propiedad 
lineJoin es declarada como miter. 

font Esta propiedad es similar a la propiedad font de CSS y utiliza la misma sintaxis para 
declarar los estilos del texto. 

textAlign Esta propiedad determina como el texto sera alineado. Los posibles valores son 
start, end, left, right y center. 

textBaseline Esta propiedad determina el alineamiento vertical para el texto. Los posibles 
valores son: top, hanging, middle, alphabetic, ideographic y bottom. 
shadowColor Esta propiedad establece el color para la sombra. Utiliza valores CSS. 
shadowOffsetX Esta propiedad declara la distancia horizontal entre la sombra y el objeto. 
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shadowOffsetY Esta propiedad declara la distancia vertical entre la sombra y el objeto. 
shadowBlur Esta propiedad recibe un valor numerico para generar un efecto de 
difuminacion para la sombra. 

globalCompositeOperation Esta propiedad determina como las nuevas figuras seran 
dibujadas en el lienzo considerando las figuras ya existentes. Puede recibir varios valores: 
source-over, source-in, source-out, source-atop, lighter, xor, 
destination-over, destination-in, destination-out, destination-atop, 
darker y copy. El valor por defecto es source-over, lo que significa que las nuevas 
formas son dibujadas sobre las anteriores. 
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API Drag and Drop 

8.1 Arrastrar y soltar en la web 

Arrastrar un elemento desde un lugar y luego soltarlo en otro es algo que hacemos todo el 
tiempo en aplicaciones de escritorio, pero ni siquiera imaginamos hacerlo en la web. Esto 
no es debido a que las aplicaciones web son diferentes sino porque desarrolladores nunca 
contaron con una tecnologia estandar disponible para ofrecer esta herramienta. 

Ahora, gracias a la API Drag and Drop, introducida por la especificacion HTML5, finalmente 
tenemos la oportunidad de crear software para la web que se comportara exactamente como 
las aplicaciones de escritorio que usamos desde siempre. 

Nuevos eventos 

Uno de los mas importantes aspectos de esta API es un conjunto de siete nuevos eventos 
introducidos para informar sobre cada una de las situaciones involucradas en el proceso. 
Algunos de estos eventos son disparados por la fuente (el elemento que es arrastrado) y 
otros son disparados por el destino (el elemento en el cual el elemento arrastrado sera 
soltado). Por ejemplo, cuando el usuario realiza una operacion de arrastrar y soltar, el 
elemento origen (el que es arrastrado) dispara estos tres eventos: 

dragstart Este evento es disparado en el momento en el que el arrastre comienza. Los datos 
asociados con el elemento origen son definidos en este momento en el sistema. 
drag Este evento es similar al evento mousemove, excepto que sera disparado durante 
una operacion de arrastre por el elemento origen. 
dragend Cuando la operacion de arrastrar y soltar finaliza (sea la operacion exitosa o no) 
este evento es disparado por el elemento origen. 

Y estos son los eventos disparados por el elemento destino (donde el origen sera 
soltado) durante la operacion: 

dragenter Cuando el puntero del raton entra dentro del area ocupada por los posibles 
elementos destino durante una operacion de arrastrar y soltar, este evento es 
disparado. 

dragover Este evento es similar al evento mousemove, excepto que es disparado durante 
una operacion de arrastre por posibles elementos destino. 
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drop Cuando el elemento origen es soltado durante una operacion de arrastrar y soltar, 
este evento es disparado por el elemento destino. 
dragleave Este evento es disparado cuando el raton sale del area ocupada por un 
elemento durante una operacion de arrastrar y soltar. Este evento es generalmente 
usado junto con dragenter para mostrar una ayuda visual al usuario que le permita 
identificar el elemento destino (donde soltar). 

Antes de trabajar con esta nueva herramienta, existe un aspecto importante que 
debemos considerar. Los navegadores realizan acciones por defecto durante una 
operacion de arrastrar y soltar. 

Para obtener el resultado que queremos, necesitamos prevenir en algunas ocasiones 
este comportamiento por defecto y personalizar las reacciones del navegador. Para 
algunos eventos, como dragenter, dragover y drop, la prevencion es necesaria, incluso 
cuando una accion personalizada ya fue especificada. 

Veamos como debemos proceder usando un ejemplo simple. 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Drag and Drop</title> 

clink rel="stylesheet" href="dragdrop.css"> 

<script src="dragdrop.j s"></script> 

</head> 

csection id="cajasoltar"> 

Arrastre y suelte la imagen aqui 
</section> 

csection id="cajaimagenes"> 

cimg id="imagen" src="http://www.minkbooks.com/content/ 

monsterl.gif"> 

c/section> 

c/body> 

c/html> 


Listado 8-1. Plantilla para la operacion arrastrar y soltar. 

El documento HTML del Listado 8-1 incluye un elemento <section> identificado 
como cajasoltar y una imagen. El elemento <section> sera usado como elemento 
destino y la imagen sera el elemento a arrastrar. Tambien incluimos dos archivos para 
estilos CSS y el codigo javascript que se hara cargo de la operacion. 


#cajasoltar{ 
float: left; 
width: 500px; 
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height: 300px; 
margin: lOpx; 

border: lpx solid #999999; 

} 

#caj aimagenes{ 
float: left; 
width: 3 2 Opx; 
margin: lOpx; 

border: lpx solid #999999; 

} 

#cajaimagenes > img{ 
float: left; 
padding: 5px; 

} 


Listado 8-2. Estilos para la plantilla ('dragdrop. css). 

Las reglas en el Listado 8-2 simplemente otorgan estilos a las cajas que nos serviran 
para identificar el elemento a arrastrar y el destino. 

function iniciarO { 

origenl=document.getElementByld( 1 imagen 1 ); 
origenl.addEventListener('dragstart 1 , arrastrado, 

false) ; 

destino=document.getElementByld('cajasoltar'); 
destino.addEventListener('dragenter', function(e){ 
e.preventDefault(); 

}, false) ; 

destino.addEventListener( 1 dragover', function(e){ 
e.preventDefault(); 

}, false) ; 

destino.addEventListener( 1 drop', soltado, false); 

} 

function arrastrado(e){ 

var codigo='<img src="'+origenl.getAttribute( 1 src 1 


e.dataTransfer.setData( 1 Text', codigo); 

} 

function soltado(e){ 
e.preventDefault(); 

destino.innerHTML=e.dataTransfer.getData( 1 Text'); 

} 

window.addEventListener('load 1 , iniciar, false); 



Listado 8-3. Codigo elemental para una operacion arrastrar y soltar. 


Existen algunos atributos que podemos usar en los elementos HTML para configurar el 
proceso de una operacion arrastrar y soltar, pero basicamente todo puede ser hecho 
desde codigo Javascript. En el Listado 8-3, presentamos tres funciones: la funcion 
iniciarO agrega las escuchas para los eventos necesarios en esta operacion, y las 
funciones arrastradoO y soltadoO generan y reciben la informacion que es 
transmitida por este proceso. 
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Para que una operation arrastrar y soltar se realice normalmente, debemos preparar 
la information que sera compartida entre el elemento origen y el elemento destino. Para 
lograr esto, una escucha para el evento dragstart fue agregada. La escucha llama a la 
funcion arrastradoO cuando el evento es disparado y la information a ser compartida 
es preparada en esta funcion usando setData (). 

La operation soltar no es normalmente permitida en la mayoria de los elementos de 
un documento por defecto. Por este motivo, para hacer esta operation disponible en 
nuestro elemento destino, debemos prevenir el comportamiento por defecto del 
navegador. Esto fue hecho agregando una escucha para los eventos dragenter y 
dragover y ejecutando el metodo preventDefault () cuando son disparados. 

Finalmente, una escucha para el evento drop fue agregada para llamar a la funcion 
soltado () que recibira y procesara los datos enviados por el elemento origen. 

Conceptos basicos: Para responder a los eventos dragenter y dragover 
usamos una funcion anonima y llamamos en su interior al metodo 
preventDefault 0 que cancela el comportamiento por defecto del navegador. 
La variable e fue enviada para referenciar al evento dentro de la funcion. Para 
obtener mas information acerca de funciones anonimas, visite nuestro sitio web 
y siga los enlaces correspondientes a este capitulo. 

Cuando el elemento origen comienza a ser arrastrado, el evento dragstart es 
disparado y la funcion arrastrado 0 es llamada. En esta funcion obtenemos el valor del 
atributo src del elemento que esta siendo arrastrado y declaramos los datos que seran 
transferidos usando el metodo setData () del objeto dataTransfer. Desde el otro lado, 
cuando un elemento es soltado dentro del elemento destino, el evento drop es disparado 
y la funcion soltado () es llamada. Esta funcion modifica el contenido del elemento 
destino con la information obtenida por el metodo getData (). Los navegadores tambien 
realizan acciones por defecto cuando estos eventos son disparados (por ejemplo, abrir un 
enlace o actualizar la ventana para mostrar la imagen que fue soltada) por lo que 
debemos prevenir este comportamiento usando el metodo preventDefault (), comoya 
hicimos para otros eventos anteriormente. 

Hagalo usted Mismo: Cree un archivo HTML con la plantilla del Listado 8-1, un 
archivo CSS llamado dragdrop.css con los estilos del Listado 8-2, y un archivo 
Javascript llamado dragdrop. js con el codigo del Listado 8-3. Para probar el 
ejemplo, abra el archivo HTML en su navegador y arrastre la imagen hacia el 
cuadro de la izquierda. 

dataTransfer 

Este es el objeto que contendra la information en una operation arrastrar y soltar. El 
objeto dataTransfer tiene varios metodos y propiedades asociados. Ya utilizamos los 
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metodos setDataO y getDataO en nuestro ejemplo del Listado 8-3. Junto con 
clearData (), estos son los metodos a cargo de la informacion que es transferida: 

setData(tipo, dato) Este metodo es usado para declarar los datos a ser enviados y su tipo. 
El metodo puede recibir tipos de datos regulares (como text/plain, text/html o 
text/uri-list), tipos de datos especiales (como URL o Text) o incluso tipos de 
datos personalizados. Un metodo setData () debe ser llamado por cada tipo de datos 
que queremos enviar en la misma operacion. 

getData(tipo) Este metodo retorna los datos enviados por el origen, pero solo del tipo 
especificado. 

clearDataf) Este metodo remueve los datos del tipo especificado. 

En la funcion arrastradoO del Listado 8-3, creamos un pequeno codigo HTML que 
incluye el valor del atributo sro del elemento que comenzo a ser arrastrado, grabamos 
este codigo en la variable codigo y luego enviamos esta variable como el dato a ser 
transferido usando el metodo setDataO. Debido a que estamos enviando texto, 
declaramos el tipo de dato como Text. 

IMPORTANTE: Podriamos haber usado un tipo de datos mas apropiado en 
nuestro ejemplo, como text/html o incluso un tipo personalizado, pero varios 
navegadores solo admiten un numero limitado de tipos en este momento, por lo 
que el tipo Text hace a nuestra pequena aplicacion mas compatible y la deja lista 
para ser ejecutada. 

Cuando recuperamos los datos en la funcion soltado () usando el metodo getData (), 
tenemos que especificar el tipo de datos a ser leido. Esto es debido a que diferentes clases 
de datos pueden ser enviados por el mismo elemento. Por ejemplo, una imagen podria 
enviar la imagen misma, la URL y un texto describiendo la imagen. Toda esta informacion 
puede ser enviada usando varias declaraciones de setDataO con diferentes tipos de 
valores y luego recuperada por getData () especificando los mismo tipos. 

IMPORTANTE: Para obtener mayor informacion acerca de tipos de datos para la 
operacion arrastrar y soltar, visite nuestro sitio web y siga los enlaces correspondientes 
a este capitulo. 

El objeto dataTransfer tiene algunos metodos y propiedades mas que a veces 
podrfan resultar util para nuestras aplicaciones: 

setDraglmage(elemento, x, y) Algunos navegadores muestran una imagen en miniatura 
junto al puntero del raton que representa al elemento que esta siendo arrastrado. Este 
metodo es usado para personalizar esa imagen y seleccionar la posicion la posicion en 
la que sera mostrada relativa al puntero del raton. Esta posicion es determinada por 
los atributos x e y. 
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types Esta propiedad retorna un array conteniendo los tipos de datos que fueron 
declarados durante el evento dragstart (por el codigo o el navegador). Podemos 
grabar este array en una variable (lista=dataTransfer. types) y luego leerlo con 
un bucle for. 

files Esta propiedad retorna un array conteniendo informacion acerca de los archivos que 
estan siendo arrastrados. 

dropEffect Esta propiedad retorna el tipo de operacion actualmente seleccionada. Los 
posibles valores son none, copy, link y move. 
effectAllowed Esta propiedad retorna los tipos de operaciones que estan permitidas. 
Puede ser usada para cambiar las operaciones permitidas. Los posibles valores son: 
none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized. 

Aplicaremos algunos de estos metodos y propiedades en los siguientes ejemplos. 

dragenter, dragleave y dragend 

Nada fue hecho aun con el evento dragenter. Solo cancelamos el comportamiento por 
defecto de los navegadores cuando este evento es disparado para prevenir efectos no 
deseados. Y tampoco aprovechamos los eventos dragleave y dragend. Estos son 
eventos importantes que nos permitiran ayudar al usuario cuando se encuentra 
arrastrando objetos por la pantalla. 


function iniciar(){ 

origenl=document.getElementByld('imagen 1 ); 

origenl.addEventListener( 1 dragstart 1 , arrastrado, false); 

origenl.addEventListener('dragend', finalizado, false); 

soltar=document.getElementByld('caj asoltar'); 
soltar.addEventListener('dragenter 1 , entrando, false); 
soltar.addEventListener('dragleave', saliendo, false); 

soltar.addEventListener('dragover 1 , function(e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('drop 1 , soltado, false); 

} 

function entrando(e){ 
e.preventDefault(); 

soltar.style,background='rgba(0,150,0,.2)'; 

} 

function saliendo(e){ 
e.preventDefault(); 
soltar.style.background= 1 #FFFFFF 1 ; 

} 

function finalizado(e){ 
elemento=e.target; 

elemento.style.visibility='hidden 1 ; 

} 
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function arrastrado(e){ 

var codigo='<img src="'+origenl.getAttribute( 1 src 1 )+'"> 1 ; 
e.dataTransfer.setData('Text', codigo); 

} 

function soltado(e){ 
e.preventDefault(); 
soltar.style.background= 1 #FFFFFF 1 ; 
soltar. innerHTML=e . dataTransf er. getData (' Text') ,- 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 8-4. Controlando todo el proceso de arrastrar y soltar. 

El codigo Javascript del Listado 8-4 reemplaza al codigo del Listado 8-3. En este nuevo 
ejemplo, agregamos dos funciones para el elemento destino y una para el elemento 
origen. Las funciones entrandoO y saliendoO cambiaran el color de fondo del 
elemento destino cada vez que el puntero del raton este arrastrando un objeto y entre o 
saiga del area ocupada por este elemento (estas acciones disparan los eventos 
dragenter y dragleave). Ademas, la funcion finalizadoO sera llamada por la 
escucha del evento dragend cuando el objeto arrastrado es soltado. Note que este 
evento o la funcion misma no controlan si el proceso fue exitoso o no. Este control lo 
deberemos hacer nosotros en el codigo. 

Gracias a los eventos y funciones agregadas, cada vez que el raton arrastra un objeto y 
entra en el area del elemento destino, este elemento se volvera verde, y cuando el objeto 
es soltado la imagen original es borrada de la pantalla. Estos cambios visibles no estan 
afectando el proceso de arrastrar y soltar, pero si estan ofreciendo una gufa clara para el 
usuario durante la operacion. 

Para prevenir acciones por defecto del navegador, tenemos que usar el metodo 
preventDefault () en cada funcion, incluso cuando acciones personalizadas fueron 
declaradas. 

Hagalo usted mismo: Copie el codigo del Listado 8-4 dentro del archivo Javascript, 
abra el documento HTML del Listado 8-1 en su navegador, y arrastre la imagen que 
aparece en la pantalla dentro de la caja ubicada a su izquierda. 

Seleccionando un origen valido 

No existe ningun metodo espedfico para detectar si el elemento origen es valido o no. No 
podemos confiar en la informacion retornada por el metodo getData () porque incluso 
cuando podemos recuperar solo los datos del tipo especificado, otras fuentes podrian 
originar el mismo tipo y proveer datos que no esperabamos. Hay una propiedad del objeto 
dataTransfer llamada types que retorna un array con la lista de tipos configurados 
durante el evento dragstart, pero tambien es inutil para propositos de validacion. 


185 




El gran libro de HTML5, CSS3 y Javascript 


Por esta razon, las tecnicas para seleccionar y validar los datos transferidos en una 
operacion arrastrar y soltar son variados, y pueden ser tan simples o complejos como 
necesitemos. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Drag and Drop</title> 

<link rel="stylesheet" href="dragdrop.css"> 

<script src="dragdrop.js"></script> 

</head> 

<body> 

<section id="cajasoltar"> 

Arrastre y suelte las imagenes aqui 
</section> 

<section id="cajaimagenes"> 

<img id="imagenl" 

src="http://www.minkbooks.com/content/monsterl.gif"> 
<img id="imagen2" 

src="http://www.minkbooks.com/content/monster2.gif"> 
<img id="imagen3" 

src="http://www.minkbooks.com/content/monster3.gif"> 
<img id="imagen4" 

src="http://www.minkbooks.com/content/monster4.gif"> 

</section> 

</body> 

</html> 


Listado 8-5. Nueva plantilla con varias imagenes para arrastrar. 

Usando la nueva plantilla HTML del Listado 8-5 vamos a filtrar los elementos a ser 
soltados dentro del elemento destino controlando el atributo id de la imagen. El siguiente 
codigo Javascript indicara cual imagen puede ser soltada y cual no: 


function iniciar(){ 

var imagenes=document.querySelectorAll( 1 #cajaimagenes > img'); 
for(var i=0; icimagenes.length; i++){ 

imagenes[i].addEventListener('dragstart', arrastrado, false); 

} 

soltar=document.getElementByld('caj asoltar'); 
soltar.addEventListener('dragenter', function(e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('dragover 1 , function (e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('drop 1 , soltado, false); 

} 
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function arrastrado(e){ 
elemento=e.target; 

e.dataTransfer.setData('Text', elemento.getAttribute( 1 id')); 

} 

function soltado(e){ 
e.preventDefault(); 

var id=e.dataTransfer.getData('Text 1 ); 

if(id!="imagen4"){ 

var src=document.getElementById(id).src; 
soltar.innerHTML='<img src=" 1 +src+ 1 ">'; 

}else{ 

soltar.innerHTML= 1 la imagen no es admitida'; 

} 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 8-6. Enviando el valor del atributo id. 

No han cambiado muchas cosas en el Listado 8-6 de anteriores listados. En este codigo 
estamos usando el metodo querySelectorAll () para agregar una escucha para el evento 
dragstart a cada imagen dentro del elemento cajaimagenes, enviando el valor del 
atributo id con setData () cada vez que una imagen es arrastrada, y controlando el valor 
de id en la funcion soitado () para evitar que el usuario arrastre y suelte la imagen con el 
atributo igual a "imagen4" (el mensaje "la imagen no es admitida" es mostrado dentro 
del elemento destino cuando el usuario intenta arrastrar y soltar esta imagen en particular). 

Este es, por supuesto, un filtro extremadamente sencillo. Puede usar el metodo 
querySelectorAll () en la funcion soitado 0 para controlar que la imagen recibida es 
una de las que se encuentran dentro del elemento cajaimagenes, por ejemplo, o usar 
propiedades del objeto dataTransfer (como types o files), pero es siempre un 
proceso personalizado. En otras palabras, deberemos hacernos cargo nosotros mismos de 
realizar este control. 

setDraglmage() 

Cambiar la imagen en miniatura que es mostrada junto al puntero del raton en una operacion 
arrastrar y soltar puede parecer inutil, pero en ocasiones nos evitara dolores de cabeza. El 
metodo setDragimage () no solo nos permite cambiar la imagen sino tambien recibe dos 
atributos, x e y, para especificar la posicion de esta imagen relativa al puntero. Algunos 
navegadores generan una imagen en miniatura por defecto a partir del objeto original que es 
arrastrado, pero su posicion relativa al puntero del raton es determinada por la posicion del 
puntero cuando el proceso comienza. El metodo setDragimage () nos permite declarar una 
posicion especifica que sera la misma para cada operacion arrastrar y soltar. 


<!DOCTYPE html> 
chtml lang="es"> 
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<title>Drag and Drop</title> 

<link rel="stylesheet" href="dragdrop.css"> 

<script src="dragdrop.js"></script> 

</head> 

<body> 

<section id="cajasoltar"> 

<canvas id="lienzo" width="500" height="300"></canvas> 
</section> 

<section id="cajaimagenes"> 

<img id="imagenl" 

src="http://www.minkbooks.com/content/monsterl.gif"> 
<img id="imagen2" 

src="http://www.minkbooks.com/content/monster2.gif"> 
<img id="imagen3" 

src="http://www.minkbooks.com/content/monster3.gif"> 
<img id="imagen4" 

src="http://www.minkbooks.com/content/monster4.gif"> 
</section> 

</body> 

</html> 


Listado 8-7. <canvas> como elemento destino. 

Con el nuevo documento HTML del Listado 8-7 vamos a estudiar la importancia del 
metodo setDragimage () usando un elemento <canvas> como el elemento destino. 


function iniciar(){ 

var imagenes=document.querySelectorAll( 1 ttcajaimagenes > img'); 
forfvar i=0; i<imagenes.length; i++){ 

imagenes[i].addEventListener( 1 dragstart', arrastrado, false); 
imagenes[i].addEventListener( 1 dragend', finalizado, false); 

} 

soltar=document.getElementByld('lienzo'); 
lienzo=soltar.getContext('2d'); 

soltar.addEventListener('dragenter', function(e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('dragover 1 , function(e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('drop 1 , soltado, false); 

} 

function finalizado(e){ 
elemento=e.target; 

elemento.style.visibility='hidden 1 ; 

} 

function arrastrado(e){ 
elemento=e.target; 

e.dataTransfer.setData('Text', elemento.getAttribute('id')); 

e.dataTransfer.setDragimage(e.target, 0, 0); 

} 
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function soltado(e){ 
e.preventDefault(); 

var id=e.dataTransfer.getData('Text 1 ); 
var elemento=document.getElementByld(id); 

var posx=e.pageX-soltar.offsetLeft; 
var posy=e.pageY-soltar.offsetTop; 

lienzo.drawlmage(elemento,posx,posy); 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 8-8. Una pequeha aplicacion para arrastrary soltar. 

Probablemente, con este ejemplo, nos estemos acercando a lo que serfa una 
aplicacion de la vida real. El codigo del Listado 8-8 controlara tres diferentes aspectos del 
proceso. Cuando la imagen es arrastrada, la funcion arrastradoO es llamada y en su 
interior una imagen miniatura es generada con el metodo setDragimage (). El codigo 
tambien crea el contexto para trabajar con el lienzo y dibuja la imagen soltada usando el 
metodo drawlmage () estudiado en el capftulo anterior. Al final de todo el proceso la 
imagen original es ocultada usando la funcion finalizado (). 

Para la imagen miniatura personalizada usamos el mismo elemento que esta siendo 
arrastrado, pero declaramos la posicion relativa al puntero del raton como 0,0. Gracias a 
esto ahora sabremos siempre cual es exactamente la ubicacion de la imagen miniatura. 
Aprovechamos este dato importante dentro de la funcion soltadoO. Usando la misma 
tecnica introducida en el capitulo anterior, calculamos donde el objeto es soltado dentro 
del lienzo y dibujamos la imagen en ese lugar preciso. Si prueba este ejemplo en 
navegadores que ya aceptan el metodo setDragimage () (por ejemplo, Firefox 4+), vera 
que la imagen es dibujada en el lienzo exactamente en la posicion de la imagen miniatura 
que acompana al puntero del raton, haciendo facil para el usuario seleccionar el lugar 
adecuado donde soltarla. 

IMPORTANTE: El codigo en el Listado 8-8 usa el evento dragend para ocultar la 
imagen original cuando la operacion termina. Este evento es disparado por el 
elemento origen cuando una operacion de arrastre finaliza, incluso cuando no fue 
exitosa. En nuestro ejemplo la imagen sera ocultada en ambos casos, exito o fracaso. 
Usted debera crear los controles adecuados para actuar solo en caso de exito. 

Archivos 

Posiblemente la caracteristica mas interesante de la API Drag and Drop es la habilidad de 
trabajar con archivos. La API no esta solo disponible dentro del documento, sino tambien 
integrada con el sistema, permitiendo a los usuarios arrastrar elementos desde el 
navegador hacia otras aplicaciones y viceversa. Y normalmente los elementos mas 
requeridos desde aplicaciones externas son archivos. 
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Como vimos anteriormente, existe una propiedad especial en el objeto dataTransfer 
que retornara un array conteniendo la lista de archivos que estan siendo arrastrados. 
Podemos usar esta informacion para construir complejos codigos que trabajan con archivos 
o subirlos a un servidor. 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Drag and Drop</title> 

<link rel="stylesheet" href="dragdrop.css"> 

<script src="dragdrop.j s"></script> 

</head> 

<section id="cajasoltar"> 

Arrastre y suelte archivos en este espacio 
</section> 

</body> 

</html> 


Listado 8-9. Plantilla simple para arrastrar archivos. 

El documento HTML del Listado 8-9 genera simplemente una caja para soltar los 
archivos arrastrados. Los archivos seran arrastrados desde una aplicacion externa (por 
ejemplo, el Explorador de Archivos de Windows). Los datos provenientes de los archivos 
seran procesados por el siguiente codigo: 


function iniciar(){ 

soltar=document.getElementByld( 1 caj asoltar'); 
soltar.addEventListener('dragenter', function(e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('dragover 1 , function(e){ 

e.preventDefault(); }, false); 
soltar.addEventListener('drop', soltado, false); 

} 

function soltado(e){ 
e.preventDefault(); 

var archivos=e.dataTransfer.files; 

var lista=' 1 ; 

for(var f=0;f<archivos.length;f++){ 

lista+='Archivo: 1 +archivos[f].name+ 1 1 +archivos[f].size+ 1 <br> 1 ; 

} 

soltar.innerHTML=lista; 

} 

window.addEventListener('load', iniciar, false); 


Listado 8-10. Procesando los datos en la propiedad files. 
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La informacion retornada por la propiedad files del objeto dataTransfer puede 
ser grabada en una variable y luego leida por un bucle for. En el codigo del Listado 8-10, 
solo mostramos el nombre y el tamano del archivo en el elemento destino usando las 
propiedades name y size. Para aprovechar esta informacion y construir aplicaciones mas 
complejas, necesitaremos recurrir a otras APIs y tecnicas de programacion, como veremos 
mas adelante en este libro. 

Hagalo usted mismo: Cree nuevos archivos con los codigos de los Listados 8-9 y 
8-10, y abra la plantilla en su navegador. Arrastre archivos desde el Explorador de 
Archivos o cualquier otra aplicacion similar dentro del elemento destino. Luego 
de esta accion deberia ver en pantalla una lista con el nombre y tamano de cada 
archivo arrastrado. 


8.2 Referenda rapida 

La API Drag and Drop introduce eventos especfficos, metodos y propiedades para construir 

aplicaciones que incorporan la capacidad de arrastrar y soltar elementos en pantalla. 

Eventos 

Existen siete eventos para esta API: 

dragstart Este evento es disparado por el elemento origen cuando la operacion de 
arrastre comienza. 

drag Este evento es disparado por el elemento origen mientras una operacion de arrastre 
se esta realizando. 

dragend Este evento es disparado por el elemento origen cuando una operacion de 
arrastre es terminada, ya sea porque la accion de soltar fue exitosa o porque la 
operacion de arrastre fue cancelada. 

dragenter Este evento es disparado por el elemento destino cuando el puntero del raton 
entra en el area ocupada por este elemento. Este evento siempre tiene que ser 
cancelado usando el metodo preventDefault (). 

dragover Este evento es disparado periodicamente por el elemento destino cuando el 
puntero del raton esta sobre el. Este evento siempre tiene que ser cancelado usando el 
metodo preventDefault(). 

drop Este evento es disparado por el elemento destino cuando el elemento origen es 
soltado en su interior. Este evento siempre tiene que ser cancelado usando el metodo 
preventDefault(). 

dragleave Este evento es disparado por el elemento destino cuando el puntero del raton 
sale del area ocupada por el mismo. 
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Metodos 

La siguiente es una lista de los metodos mas importantes incorporados por esta API: 

setData(tipo, dato) Este metodo es usado para preparar los datos a ser enviados cuando 
el evento dragstart es disparado. El atributo tipo puede ser cualquier tipo de datos 
regular (como text/plain o text/html) o un tipo de datos personalizado. 

getData(tipo) Este metodo retorna los datos del tipo especificado. Es usado cuando un 
evento drop es disparado. 

clearData(type) Este metodo remueve los datos del tipo especificado. 

setDraglmage(elemento, x, y) Este metodo reemplaza la imagen en miniatura creada por 
el navegador en la operacion arrastrar y soltar por una imagen personalizada. Tambien 
declara la posicion que esta imagen tendra con respecto al puntero del raton. 

Propiedades 

El objeto dataTransfer, que contiene los datos transferidos en una operacion arrastrar 

y soltar, tambien introduce algunas propiedades utiles: 

types Esta propiedad retorna un array con todos los tipos establecidos durante el evento 
dragstart. 

files Esta propiedad retorna un array con informacion acerca de los archivos que estan 
siendo arrastrados. 

dropEffect Esta propiedad retorna el tipo de operacion actualmente seleccionada. Los 
valores posibles son: none, copy, link y move. 

effectAllowed Esta propiedad retorna los tipos de operacion que estan permitidos. Puede 
ser declarada para cambiar las operaciones permitidas. Los posibles valores son: none, 
copy, copyLink, copyMove, link, linkMove, move, all y uninitialized. 
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9.1 Encontrando su lugar 

La API Geolocation fue disenada para que los navegadores puedan proveer un mecanismo 
de deteccion por defecto que permita a los desarrolladores determinar la ubicacion ffsica 
real del usuario. Previamente solo contabamos con la opcion de construir una gran base 
de datos con informacion sobre direcciones IP y programar codigos exigentes dentro del 
servidor que nos darlan una idea aproximada de la ubicacion del usuario (generalmente 
tan imprecisa como su pais). 

Esta API aprovecha nuevos sistemas, como triangulacion de red y GPS, para retornar una 
ubicacion precisa del dispositivo que esta accediendo a la aplicacion. La valiosa informacion 
retornada nos permite construir aplicaciones que se adaptaran a las particulares 
necesidades del usuario o proveeran informacion localizada de forma automatica. 

Tres metodos especfficos son provistos para usar la API: 

getCurrentPosition(ubicacion, error, configuracion) Este es el metodo utilizado para 
consultas individuales. Puede recibir hasta tres atributos: una funcion para procesar la 
ubicacion retornada, una funcion para procesar los errores retornados, y un objeto 
para configurar como la informacion sera adquirida. Solo el primer atributo es 
obligatorio para que el metodo trabaje correctamente. 
watchPosition(ubicacion, error, configuracion) Este metodo es similar al anterior, excepto 
que comenzara un proceso de vigilancia para la deteccion de nuevas ubicaciones. 
Trabaja de forma similar que el conocido metodo setinterval () de Javascript, 
repitiendo el proceso automaticamente en determinados periodos de tiempo de 
acuerdo a la configuracion por defecto o a los valores de sus atributos. 
clearWatch(id) El metodo watchPositionO retorna un valor que puede ser almacenado en 
una variable para luego ser usado como referenda pro el metodo clearWatchO y asi 
detener la vigilancia. Este metodo es similar a clear interval () usado para detener los 
procesos comenzados por setinterval 0 . 

getCurrentPosition(ubicacion) 

Como dijimos, solo el primer atributo es requerido para que trabaje correctamente el 
metodo getCurrentPositionO . Este atributo es una funcion que recibira un objeto 
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llamado Position, el cual contiene toda la informacion retornada por los sistemas de 
ubicacion. 

El objeto Position tiene dos atributos: 

coords Este atributo contiene un grupo de valores que establecen la ubicacion del 
dispositivo y otros datos importantes. Los valores son accesibles a traves de siete 
atributos internos: latitude (latitud), longitude (longitud), altitude (altitud en 
metros), accuracy (exactitud en metros), altitudeAccuracy (exactitud de la 
altitud en metros), heading (direccion en grados) y speed (velocidad en metros por 
segundo). 

timestamp Este atributo indica el momento en el que la informacion fue adquirida (en 
formato timestamp). 

Este objeto, como dijimos, es pasado a la funcion que definimos como atributo del 
metodo getCurrentPositionO y luego sus datos son accedidos y procesados en esta 
funcion. Veamos un ejemplo practico de como usar este metodo: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Geolocation</title> 

<script src="geolocation.j s"></script> 

</head> 

<body> 

<section id="ubicacion"> 

<button id="obtener">Obtener mi Ubicacion</button> 
</section> 

</body> 

</html> 


Listado 9-1. Documento HTML para la API Geolocation. 

El Listado 9-1 sera nuestra plantilla HTML para el resto de este capitulo. Es lo mas 
elemental posible, con tan solo un elemento <button> dentro de un elemento 
<section> que vamos a usar para solicitar y mostrar la informacion retornada por el 
sistema de ubicacion. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 

navigator.geolocation.getCurrentPosition(mostrar); 

} 
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function mostrar(posicion){ 

var ubicacion=document.getElementById('ubicacion'); 

datos+= 1 Latitud: '+posicion.coords.latitude+'<br> 1 

datos+= 1 Longitud: '+posicion.coords.longitude+'<br> 1 ; 

datos+= 1 Exactitud: 1 +posicion.coords.accuracy^'mts.<br>'; 

ubicacion.innerHTML=datos; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 9-2. Obteniendo information sobre la localization del usuario. 

Una implementation de la API Geolocation es sencilla: declaramos el metodo 
getCurrentPosition () y creamos una funcion que mostrara los valores retornados por 
el mismo. El metodo getCurrentPosition () es un metodo del objeto geolocation. 
Este es un nuevo objeto que es parte del objeto navigator, un objeto Javascript que fue 
anteriormente implementado para retornar information acerca del navegador y el sistema. 
Por lo tanto, para acceder al metodo getCurrentPosition () la sintaxis a usar es 
navigator.geolocation.getCurrentPosition(funcion), donde funcion es una 
funcion personalizada que recibira el objeto Position y procesara la informacion que 
contiene. 

En el codigo del Listado 9-2, llamamos a esta funcion mostrar (). Cuando el metodo 
getCurrentPosition () es llamado, un nuevo objeto Position es creado con la 
informacion de la ubicacion actual del usuario y es enviado a la funcion mostrar(). 
Referenciamos este objeto dentro de la funcion con la variable posicion, y luego usamos 
esta variable para mostrar los datos. 

El objeto Position tiene dos importantes atributos: coords y timestamp. En 
nuestro ejemplo solo usamos coords para acceder a la informacion que queremos 
mostrar (latitud, longitud y exactitud). Estos valores son grabados en la variable datos y 
luego mostrados en la pantalla como el nuevo contenido del elemento ubicacion. 

Hagalo usted mismo: Cree archivos con los codigos de los Listados 9-1 y 9-2, suba 
los archivos a su servidor y luego abra el documento HTML en su navegador. 
Cuando haga clic en el boton, el navegador le preguntara si desea activar o no el 
sistema de ubicacion geografica. Si le permite a la aplicacion acceder a esta 
informacion, entonces su ubicacion, incluyendo longitud, latitud y exactitud, sera 
mostrada en pantalla. 

getCurrentPosition(ubicacion, error) 

i.Pero que ocurre si usted no permite al navegador acceder a informacion acerca de su 
ubicacion? Agregando un segundo atributo al metodo getCurrentPosition (), con otra 
funcion, podremos capturar los errores producidos en el proceso. Uno de esos errores, 
por supuesto, ocurre cuando el usuario no acepta compartir sus datos. 
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Junto con el objeto Position, el metodo getCurrentPosition () retorna el objeto 
PositionError si un error es detectado. Este objeto es enviado al segundo atributo de 
getCurrentPosition (), y tiene dos atributos internos, error y message, para proveer 
el valor y la descripcion del error. Los tres posibles errores son representados por las 
siguientes constantes: 

PERMISSION_DENIED (permiso denegado) - valor 1. Este error ocurre cuando el usuario 
no acepta activar el sistema de ubicacion para compartir su informacion. 
POSITION_UNAVAILABLE (ubicacion no disponible) - valor 2. Este error ocurre cuando la 
ubicacion del dispositivo no pudo determinarse por ninguno de los sistemas de 
ubicacion disponibles. 

TIMEOUT (tiempo excedido) - valor 3. Este error ocurre cuando la ubicacion no pudo ser 
determinada en el perfodo de tiempo maximo declarado en la configuracion. 


function iniciar(){ 

var boton=document.getElementByld('obtener 1 ); 
boton.addEventListener( 1 click 1 , obtener, false); 

} 

function obtener(){ 

navigator.geolocation.getCurrentPosition(mostrar, errores); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var datos=''; 

datos+='Latitud: '+posicion.coords.latitude+'<br>'; 

datos+='Longitud: '+posicion.coords.longitude+'<br>'; 

datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>'; 

ubicacion.innerHTML=datos; 

} 

function errores(error){ 

alert( 1 Error: 1 terror.code+ 1 1 terror.message); 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-3. Mostrando mensajes de error. 

Los mensajes de error son ofrecidos para uso interno. El proposito es ofrecer un 
mecanismo para que la aplicacion reconozca la situation y proceda de acuerdo al error 
recibido. En el codigo del Listado 9-3, agregamos un segundo atributo al metodo 
getCurrentPosition () (otra funcion) y creamos la funcion errores 0 para mostrar la 
informacion de los atributos code y message. El valor de code sera un numero entre 0 y 
3 de acuerdo al numero de error (listado anteriormente). 

El objeto PositionError es enviado a la funcion errores 0 y representado en esta 
funcion por la variable error. Para propositos didacticos, usamos un metodo alert 0 que 
muestra los datos recibidos, pero usted deberia procesar esta informacion en silencio, si es 
posible, sin alertar al usuario de nada. Podemos tambien controlar por errores de forma 
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individual (error .permissiondenied, por ejemplo) y actuar solo si ese error en particular 
ocurrio. 

getCurrentPosition(ubicacion, error, configuration) 

El tercer atributo que podemos usar en el metodo getCurrentPosition () es un objeto 
conteniendo hasta tres posibles propiedades: 

enableHighAccuracy Esta es una propiedad booleana para informar al sistema que 
requerimos de la informacion mas exacta que nos pueda ofrecer. El navegador intentara 
obtener esta informacion a traves de sistemas como GPS, por ejemplo, para retornar la 
ubicacion exacta del dispositivo. Estos son sistemas que consumen muchos recursos, por 
lo que su uso deberfa estar limitado a circunstancias muy especfficas. Para evitar 
consumos innecesarios, el valor por defecto de esta propiedad es false (falso). 
timeout Esta propiedad indica el tiempo maximo de espera para que la operacion finalice. 
Si la informacion de la ubicacion no es obtenida antes del tiempo indicado, el error 
timeout es retornado. Su valor es en milisegundos. 
maximumAge Las ubicaciones encontradas previamente son almacenadas en un cache en 
el sistema. Si consideramos apropiado recurrir a la informacion grabada en lugar de 
intentar obtenerla desde el sistema (para evitar consumo de recursos o para una 
respuesta rapida), esta propiedad puede ser declarada con un tiempo Ifmite especifico. 
Si la ultima ubicacion almacenada es mas vieja que el valor de este atributo entonces 
una nueva ubicacion es solicitada al sistema. Su valor es en milisegundos. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 
var geoconfig={ 

enableHighAccuracy: true, 
timeout: 10000, 
maximumAge: 60000 

} ; 

navigator.geolocation.getCurrentPosition(mostrar, errores, 

geoconfig); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var datos=''; 

datos+='Latitud: '+posicion.coords.latitude+'<br>'; 

datos+='Longitud: '+posicion.coords.longitude+'<br>'; 

datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>'; 

ubicacion.innerHTML=datos; 

} 
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function errores(error){ 

alert('Error: 'terror.code+ 1 1 terror.message) ; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 9-4. Configuration del sistema. 

El codigo del Listado 9-4 intentara obtener la ubicacion mas exacta posible del 
dispositivo en no mas de 10 segundos, pero solo si no hay una ubicacion previa en el cache 
capturada menos de 60 segundos atras (si existe una ubicacion previa con menos de 60 
segundos de antigiiedad, este sera el objeto Position retornado). 

El objeto conteniendo los valores de configuration fue creado primero y luego 
referenciado desde el metodo getCurrentPositionO . Nada cambio en el resto del 
codigo. La funcion mostrarO mostrara la informacion en la pantalla independiente- 
mente de su origen (si proviene del cache o es nueva). 

Conceptos basicos: Javascript provee diferentes formas de construir un objeto. Por 
propositos de claridad, elegimos crear el objeto primero, almacenarlo en la variable 
geoconfig y luego usar esta referencia en el metodo getCurrentPositionO . 
Sin embargo, podrfamos haber insertado el objeto directamente en el metodo 
como un atributo. En aplicaciones pequenas, objetos normalmente pueden ser 
evitados, pero no es el caso de codigos mas complejos. Para aprender mas sobre 
objetos y programacion orientada a objetos en Javascript, visite nuestro sitio web y 
siga los enlaces correspondientes a este capitulo. 

Con el ultimo codigo, podemos apreciar el proposito real de la API Geolocation y cual 
fue la intencion de sus desarrolladores. Las funciones mas efectivas y practicas estan 
orientadas hacia dispositivos moviles. El valor true (verdadero) para la propiedad 
enableHighAccuracy, por ejemplo, le solicitara al navegador usar sistemas como GPS 
para obtener la ubicacion mas exacta posible (un sistema casi exclusivo de dispositivos 
moviles), y los metodos watchPositionO y clearWatchO, que veremos a 
continuation, trabajan sobre ubicaciones actualizadas constantemente, algo solo posible, 
por supuesto, cuando el dispositivo que esta accediendo la aplicacion es movil (y se esta 
moviendo). Esto trae a la luz dos asuntos importantes. Primero, la mayoria de nuestros 
codigos tendran que ser probados en un dispositivo movil para saber exactamente como 
trabajan en una situacion real. Y segundo, deberemos ser responsables con el uso de esta 
API. GPS y otros sistemas de localization consumen muchos recursos y en la mayoria de 
los casos pueden acabar pronto con la bateria del dispositivo si no somos cautelosos. 

Con respecto al primer punto, disponemos de una alternativa. Simplemente visite el 
enlace dev.w3.org/geo/api/test-suite/ y lea acerca de como experimentar y probar 
Geolocation API. Con respecto al segundo punto, solo un consejo: configure la propiedad 
enableHighAccuracy como true solo cuando es estrictamente necesario, y no abuse 
de esta posibilidad. 
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watchPosition(ubicacion, error, configuration) 

Similar a getCurrentPosition (), el metodo watchPosition () recibe tres atributos y 
realiza la misma tarea: obtener la ubicacion del dispositivo que esta accediendo a la 
aplicacion. La unica diferencia es que el primero realiza una unica operacion, mientras que 
watchPosition () ofrece nuevos datos cada vez que la ubicacion cambia. Este metodo 
vigilara todo el tiempo la ubicacion y enviara informacion a la funcion correspondiente 
cuando se detecte una nueva ubicacion, a menos que cancelemos el proceso con el 
metodo clearWatch (). 

Este es un ejemplo de como implementar el metodo watchPosition () basado en 
codigos previos: 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 
var geoconfig={ 

enableHighAccuracy: true, 
maximumAge: 60000 

} ; 

control=navigator.geolocation.watchPosition(mostrar, errores. 


function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var datos=''; 

datos+='Latitud: '+posicion.coords.latitude+'<br>'; 
datos+='Longitud: '+posicion.coords.longitude+'<br>'; 

datos+='Exactitud: '+posicion.coords.accuracy+'mts.<br>'; 

ubicacion.innerHTML=datos; 

} 

function errores(error){ 

alert('Error: 'terror.code+' 'terror.message); 

} 

window.addEventListener('load', iniciar, false); 


Listado 9-5. Probando el metodo watchPosition (). 

No notara ningun cambio en un ordenador de escritorio usando este codigo, pero en 
un dispositivo movil nueva informacion sera mostrada cada vez que haya una modificacion 
en la ubicacion del dispositivo. El atributo maximumAge determina que tan seguido la 
informacion sera enviada a la funcion mostrar (). Si la nueva ubicacion es obtenida 60 
segundos (60000 milisegundos) luego de la anterior, entonces sera mostrada, en caso 
contrario la funcion mostrar () no sera llamada. 
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Note que el valor retornado por el metodo watchPositionO fue almacenado en la 
variable control. Esta variable es como un identificador de la operacion. Si mas adelante 
queremos cancelar el proceso de vigilancia, solo debemos ejecutar la Ifnea 
clearWatch(control) y watchPosition () dejara de actualizar la informacion. 

Si ejecuta este codigo en un ordenador de escritorio, el metodo watchPositionO 
funcionara como el anterior estudiado getCurrentPositionO; la informacion no sera 
actualizada. La funcion mostrar () es solo llamada cuando la ubicacion cambia. 

Usos practicos con Google Maps 

Hasta el momento hemos mostrado la informacion sobre la ubicacion exactamente como 
la recibimos. Sin embargo, estos valores normalmente no significan nada para la gente 
comun. La mayoria de nosotros no podemos inmediatamente decir cual es nuestra actual 
ubicacion en valores de latitud y longitud, y mucho menos identificar a partir de estos 
valores una ubicacion en el mundo. Disponemos de dos alternativas: usar esta 
informacion internamente para calcular posiciones, distancias y otros valores que nos 
permitiran ofrecer resultados especfficos a nuestros usuarios (como productos o servicios 
en el area), o podemos ofrecer la informacion obtenida por medio de la API Geolocation 
en un medio mucho mas comprensible. <LY que mas comprensible que un mapa para 
representar una ubicacion geografica? 

Mas atras en este libro hablamos acerca de la API Google Maps. Esta es una API 
Javascript externa, provista por Google, que nada tiene que ver con HTML5 pero es 
incluida extraoficialmente dentro de la especificacion y es ampliamente utilizada en sitios 
webs modernos estos dfas. Ofrece una variedad de alternativas para trabajar con mapas 
interactivos e incluso vistas reales de lugares muy esperificos a traves de la tecnologfa 
StreetView. 

Vamos a mostrar un ejemplo simple de utilizacion aprovechando una parte de la API 
llamada Static Maps API. Con esta API espedfica, solo necesitamos construir una URL con 
la informacion de la ubicacion para obtener en respuesta la imagen de un mapa con el 
area seleccionada. 


function iniciar(){ 

var boton=document.getElementByld('obtener'); 
boton.addEventListener('click', obtener, false); 

} 

function obtener(){ 

navigator.geolocation.getCurrentPosition(mostrar, errores); 

} 

function mostrar(posicion){ 

var ubicacion=document.getElementByld('ubicacion'); 
var mapurl='http://maps.google.com/maps/api/staticmap?center='+ 
posicion.coords.latitude+','+posicion.coords.longitude+'&zoom= 
12&size=400x400&sensor=false&markers='+posicion.coords.latitude+ 
','+posicion.coords.longitude; 
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ubicacion.innerHTML= 1 <img src=" 1 +mapurl+■"> 1 ; 

} 

function errores(error){ 

alert('Error: 'terror.code+ 1 1 terror.message); 

} 

window.addEventListener( 1 load', iniciar, false); 


Listado 9-6. Representando la ubicacion en un mapa. 

El codigo es simple. Usamos el metodo getCurrentPositionO y enviamos la 
information a la funcion mostrar () como siempre, pero ahora en esta funcion los valores del 
objeto Position son agregados a una URL de Google y luego la direction obtenida es 
insertada como la fuente de un elemento <img> para mostrar el mapa en pantalla. 

Hagalo usted mismo: Pruebe el codigo del Listado 9-6 en su navegador usando la 
plantilla del Listado 9-1. Cambie los valores de los atributos zoom y size en la URL 
para modificar el mapa retornado por la API. Visite la pagina de Google Maps API para 
estudiar las diferentes alternativas provistas por esta API: code.google.com/ 
apis/maps/. 


9.2 Referencia rapida 

Determinar la ubicacion fisica del usuario se ha vuelto critico en aplicaciones web 
modernas. El reciente exito de los dispositivos moviles ofrece nuevas posibilidades para 
crear aplicaciones que aprovechan esta informacion. 

Metodos 

La API Geolocation provee tres metodos para obtener la ubicacion de un dispositivo: 

getCurrentPosition(ubicacion, error, configuration) Este metodo retorna informacion 
sobre la ubicacion del dispositivo que esta accediendo a la aplicacion. El primer 
atributo es una funcion destinada a procesar la informacion, el segundo atributo es 
otra funcion para procesamiento de errores, y el tercer atributo es un objeto con 
valores de configuration (vea Objeto Configuration debajo). 
watchPosition(ubicacion, error, configuration) Este metodo retorna informacion sobre la 
ubicacion del dispositivo que esta accediendo a la aplicacion cada vez que la ubicacion 
cambia. El primer atributo es una funcion destinada a procesar la informacion, el 
segundo atributo es otra funcion para procesamiento de errores, y el tercer atributo es 
un objeto con valores de configuration (vea Objeto Configuration debajo). 
clearWatch(id) Este metodo cancela el proceso que ha sido empezado por el metodo 
watchPositionO. El atributo id es el valor de identification retornado por el metodo 
watchPositionO cuando es llamado. 
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Objetos 

Los metodos getCurrentPositionO y watchPosition () generan dos objetos para 
comunicar la informacion retornada por el sistema de ubicacion y el estado de la operacion. 

Objeto Position Este objeto es generado para contener la informacion acerca de la ubicacion 
detectada. Tiene dos atributos: coords y timestamp. 

coords Este es un atributo del objeto Position. Tiene siete atributos internos para 
retornar la informacion de la ubicacion: latitude (latitud), longitude (longitud), 
altitude (altitud en metros), accuracy (exactitud en metros), 
altitudeAccuracy (exactitud de la altitud en metros), heading (direccion en 
grados) y speed (velocidad en metros por segundo). 

timestamp Este es un atributo del objeto Position. Retorna el momento en el que 
la ubicacion fue detectada. 

Objeto PositionError Este objeto es generado cuando un error ocurre. Ofrece dos atributos 
generales con el valor y el mensaje del error, y tres valores especificos para identification 
de errores individuales (listados debajo). 

message Este es un atributo del objeto PositionError. Retorna un mensaje 
describiendo el error detectado. 

error Este es un atributo del objeto PositionError. Contiene el valor del error 
detectado. Los posibles valores son listados debajo: 

PERMISSION_DENIED (permiso denegado) - valor 1 en el atributo error. Esta 
constante es true (verdadero) cuando el usuario no permite a la aplicacion 
acceder a la informacion sobre su ubicacion. 

POSITION_UNAVAILABLE (ubicacion no disponible) - valor 2 en el atributo 
error. Esta constante es true (verdadero) cuando la ubicacion del dispositivo 
no puede ser determinada. 

TIMEOUT (tiempo excedido) - valor 3 en el atributo error. Esta constante es 
true (verdadero) cuando la ubicacion no puede ser determinada antes del 
periodo de tiempo declarado en la configuracion. 

El siguiente objeto es requerido por los metodos getCurrentPositionO y 
watchPosition () para propositos de configuracion. 

Objeto Configuracion Este objeto provee valores de configuracion correspondientes para 
los metodos getCurrentPosition () y watchPosition(). 

enableHighAccuracy Esta es una de las posibles propiedades del Objeto 
Configuracion. Si es declarada como true (verdadero), le solicitara al navegador 
obtener la ubicacion mas precisa posible. 

timeout Esta es una de las propiedades del Objeto Configuracion. Indica el maximo 
tiempo disponible que tiene la operacion para realizarse. 

maximumAge Esta es una de las propiedades del Objeto Configuracion. Indica por 
cuanto tiempo la ultima ubicacion detectada sera valida. 
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API Web Storage 

10.1 Dos sistemas de almacenamiento 

La Web fue primero pensada como una forma de mostrar informacion, solo mostrarla. El 
procesamiento de informacion comenzo luego, primero con aplicaciones del lado del 
servidor y mas tarde, de forma bastante ineficiente, a traves de pequenos codigos y 
complementos (plug-ins) ejecutados en el ordenador del usuario. Sin embargo, la esencia 
de la Web siguio siendo basicamente la misma: la informacion era preparada en el 
servidor y luego mostrada a los usuarios. El trabajo duro se desarrollaba casi 
completamente del lado del servidor porque el sistema no aprovechaba los recursos en 
los ordenadores de los usuarios. 

HTML5 equilibra esta situation. Justificada por las particulares caracterfsticas de los 
dispositivos moviles, el surgimiento de los sistemas de computation en la nube, y la 
necesidad de estandarizar tecnologfas e innovaciones introducidas por plug-ins a traves de 
los ultimos anos, la especificacion de HTML5 incluye herramientas que hacen posible 
construir y ejecutar aplicaciones completamente funcionales en el ordenador del usuario, 
incluso cuando no existe conexion a la red disponible. 

Una de las caracterfsticas mas necesitadas en cualquier aplicacion es la posibilidad de 
almacenar datos para disponer de ellos cuando sean necesarios, pero no existia aun un 
mecanismo efectivo para este fin. Las llamadas "Cookies" (archivos de texto almacenados 
en el ordenador del usuario) fueron usadas por anos para preservar informacion, pero 
debido a su naturaleza se encontraron siempre limitadas a pequenas cadenas de texto, lo 
que las hatia utiles solo en determinadas circunstancias. 

La API Web Storage es basicamente una mejora de las Cookies. Esta API nos permite 
almacenar datos en el disco duro del usuario y utilizarlos luego del mismo modo que lo 
harfa una aplicacion de escritorio. El proceso de almacenamiento provisto por esta API 
puede ser utilizado en dos situaciones particulares: cuando la informacion tiene que estar 
disponible solo durante la sesion en uso, y cuando tiene que ser preservada todo el 
tiempo que el usuario desee. Para hacer estos metodos mas claros y comprensibles para 
los desarrolladores, la API fue dividida en dos partes llamadas sessionStorage y 
localStorage. 

sessionStorage Este es un mecanismo de almacenamiento que conservara los datos 
disponible solo durante la duration de la sesion de una pagina. De hecho, a diferencia 
de sesiones reales, la informacion almacenada a traves de este mecanismo es solo 
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accesible desde una unica ventana o pestana y es preservada hasta que la ventana es 
cerrada. La especificacion aun nombra "sesiones" debido a que la informacion es 
preservada incluso cuando la ventana es actualizada o una nueva pagina desde el 
mismo sitio web es cargada. 

localStorage Este mecanismo trabaja de forma similar a un sistema de almacenamiento 
para aplicaciones de escritorio. Los datos son grabados de forma permanente y se 
encuentran siempre disponibles para la aplicacion que los creo. 

Ambos mecanismos trabajan a traves de la misma interface, compartiendo los mismos 
metodos y propiedades. Y ambos son dependientes del origen, lo que quiere decir que la 
informacion esta disponible solo a traves del sitio web o la aplicacion que los creo. Cada 
sitio web tendra designado su propio espacio de almacenamiento que durara hasta que la 
ventana es cerrada o sera permanente, de acuerdo al mecanismo utilizado. 

La API claramente diferencia datos temporarios de permanentes, facilitando la 
construction de pequenas aplicaciones que necesitan preservar solo unas cadenas de 
texto como referencia temporaria (por ejemplo, carros de compra) o aplicaciones mas 
grandes y complejas que necesitan almacenar documentos completos por todo el tiempo 
que sea necesario. 

IMPORTANTE: Muchos navegadores solo trabajan de forma adecuada con esta 
API cuando la fuente es un servidor real. Para probar los siguientes codigos, le 
recomendamos que primero suba los archivos a su servidor. 


10.2 La sessionStorage 

Esta parte de la API, sessionStorage, es como un reemplazo para las Cookies de sesion. 
Las Cookies, asi como sessionStorage, mantienen los datos disponibles durante un 
perfodo especifico de tiempo, pero mientras las Cookies de sesion usan el navegador 
como referencia, sessionStorage usa solo una simple ventana o pestana. Esto significa 
que las Cookies creadas para una sesion estaran disponibles mientras el navegador 
continue abierto, mientras que los datos creados con sessionStorage estaran solo 
disponibles mientras la ventana que los creo no es cerrada. 

Implementation de un sistema de almacenamiento de datos 

Debido a que ambos sistemas, sessionStorage y localStorage, trabajan con la 
misma interface, vamos a necesitar solo un documento HTML y un simple formulario para 
probar los codigos y experimentar con esta API: 


<!DOCTYPE html> 
<html lang="es"> 
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<head> 

<title>Web Storage API</title> 

<link rel="stylesheet" href="storage.css"> 

<script src="storage.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Clave:<brxinput type="text" name="clave" id="clave"></p> 
<p>Valor:<brxtextarea name="text" id="texto"x/textareax/p> 
<pxinput type= "button" name="grabar" id= "grabar" 

value="Grabar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay informacion disponible 
</section> 

</body> 

</html> 


Listado 10-1. Plantilla para la API Storage 

Tambien crearemos un grupo de reglas de estilo simples para dar forma a la pagina y 
diferenciar el area del formulario de la caja donde los datos seran mostrados y listados: 


#cajaformulario{ 
float: left; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 40Opx; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#clave, #texto{ 
width: 20Opx; 

} 

#cajadatos > div{ 
padding: 5px; 

border-bottom: lpx solid #999999; 

} 


Listado 10-2. Estilos para nuestra plantilla. 

Hagalo usted mismo: Cree un archivo HTML con el codigo del Listado 10-1 y un 
archivo CSS llamado storage.css con los estilos del Listado 10-2. Tambien 
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necesitara crear un archivo llamado storage, js para grabar y probar los 
codigos Javascript presentados a continuacion. 

Creando datos 

Ambos, sessionStorage y localstorage, almacenan datos como items. Los items 
estan formados por un par clave/valor, y cada valor sera convertido en una cadena de 
texto antes de ser almacenado. Piense en items como si fueran variables, con un nombre y 
un valor, que pueden ser creadas, modificadas o eliminadas. 

Existen dos nuevos metodos especificos de esta API incluidos para crear y leer un valor 
en el espacio de almacenamiento: 

setltem(clave, valor) Este es el metodo que tenemos que llamar para crear un item. El 
item sera creado con una clave y un valor de acuerdo a los atributos especificados. Si 
ya existe un item con la misma clave, sera actualizado al nuevo valor, por lo que este 
metodo puede utilizarse tambien para modificar datos previos. 
getltem(clave) Para obtener el valor de un item, debemos llamar a este metodo 
especificando la clave del item que queremos leer. La clave en este caso es la misma 
que declaramos cuando creamos al item con setitemO . 


function iniciar(){ 

var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener('click', nuevoitem, false); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage.setltem(clave,valor); 

mostrar(clave); 

} 

function mostrar(clave){ 

var caj adatos=document.getElementByld('caj adatos'); 

var valor=sessionStorage.getItem(clave); 

caj adatos.innerHTML='<div>'+clave+' - '+valor+'</div> 1 ; 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-3. Almacenando y leyendo datos. 

El proceso es extremadamente simple. Los metodos son parte de sessionStorage y son 
llamados con la sintaxis sessionStorage.setltem (). En el codigo del Listado 10-3, la 
funcion nuevoitem () es ejecutada cada vez que el usuario hace clic en el boton del 
formulario. Esta funcion crea un item con la informacion insertada en los campos del 
formulario y luego llama a la funcion mostrar (). Esta ultima funcion lee el item de acuerdo a 
la clave recibida usando el metodo getitemO y muestra su valor en la pantalla. 
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Ademas de estos metodos, la API tambien ofrece una sintaxis abreviada para crear y 
leer Items desde el espacio de almacenamiento. Podemos usar la clave del Item como una 
propiedad y acceder a su valor de esta manera. 

Este metodo usa en realidad dos tipos de sintaxis diferentes de acuerdo al tipo de 
informacion que estamos usando para crear el item. Podemos encerrar una variable 
representando la clave entre corchetes (por ejemplo, sessionStorage [clave] =valor) 
o podemos usar directamente el nombre de la propiedad (por ejemplo, 
sessionStorage.miitem=valor). 


function iniciar(){ 

var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener('click', nuevoitem, false); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage[clave]=valor; 

mostrar(clave); 

} 

function mostrar(clave){ 

var caj adatos=document.getElementByld('caj adatos'); 

var valor=sessionStorage[clave]; 

cajadatos.innerHTML='<div>'+clave+' - '+valor+'</div>'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-4. Usando un atajo para trabajar con items. 


Leyendo datos 

El anterior ejemplo solo lee el ultimo item grabado. Vamos a mejorar este codigo 
aprovechando mas metodos y propiedades provistos por la API con el proposito de 
manipular items: 

length Esta propiedad retorna el numero de items guardados por esta aplicacion en el 
espacio de almacenamiento. Trabaja exactamente como la propiedad length usada 
normalmente en Javascript para procesar arrays, y es util para lecturas secuenciales. 
key(indice) Los items son almacenados secuencialmente, enumerados con un indice 
automatico que comienzo por 0. Con este metodo podemos leer un item especifico o 
crear un bucle para obtener toda la informacion almacenada. 


function iniciar(){ 

var boton=document.getElementByld('grabar'); 
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boton.addEventListener( 1 click 1 , nuevoitem, false); 
mostrarO ; 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage.setItem(clave,valor)| 
mostrar(); 

document .getElementByld('clave') .value=' ' ; 
document.getElementByld('texto').value=''; 

} 

function mostrarO { 

var caj adatos=document.getElementByld('caj adatos'); 
cajadatos . innerHTML= ' ' 

for(var f=0;f<sessionStorage.length;f++){ 
var clave=sessionStorage.key(f); 
var valor=sessionStorage.getItem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'</div>'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-5. Lstando items. 

El proposito del codigo en el Listado 10-5 es mostrar un listado complete de los items en la 
caja derecha de la pantalla. La funcion mostrar () fue mejorada usando la propiedad length 
y el metodo key 0. Creamos un bucle for que va desde 0 al numero de items que existen en 
el espacio de almacenamiento. Dentro del bucle, el metodo key() retornara la clave que 
nosotros definimos para cada item. Por ejemplo, si el item en la posicion 0 del espacio de 
almacenamiento fue creado con la clave "miitem", el codigo sessionStorage.key(0) 
retornara el valor "miitem". Llamando a este metodo desde un bucle podemos listar todos los 
items en la pantalla con sus correspondientes claves y valores. 

La funcion mostrarO es llamada desde la funcion iniciar () tan pronto como la 
aplicacion es ejecutada. De este modo podremos ver desde el comienzo los items que 
fueron grabados previamente en el espacio de almacenamiento. 

Hagalo usted mismo: Aproveche los conceptos estudiados con la API Forms en el 
Capitulo 6 para controlar la validez de los campos del formulario y no permitir la 
insercion de items vacios o invalidos. 

Eliminando datos 

Los items pueden ser creados, leidos y, por supuesto, eliminados. Es hora de ver como 
eliminar un item. La API ofrece dos metodos para este proposito: 
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removeltem(clave) Este metodo eliminara un item individual. La clave para identificar el 
item es la misma declarada cuando el item fue creado con el metodo setitemO. 
clear() Este metodo vaciara el espacio de almacenamiento. Todos los items seran eliminados. 


function iniciar(){ 

var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener('click', nuevoitem, false); 
mostrar(); 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

sessionStorage.setltem(clave,valor); 
mostrar(); 

document.getElementByld('clave').value=''; 
document.getElementByld('texto').value=''; 

} 

function mostrar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
ca j adatos . innerHTML= ' <divxbutton 

onclick="eliminarTodo()">Eliminar Todo</buttonx/div>'; 
for(var f=0;f<sessionStorage.length;f++){ 
var clave=sessionStorage.key(f); 
var valor=sessionStorage.getltem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'cbrxbutton 
onclick="eliminar(\''+clave+'\')">Eliminar</buttonx/div>'; 

} 

} 

function eliminar(clave){ 

if(confirm('Esta Seguro?')){ 

sessionStorage.removeltem(clave); 

mostrar(); 

} 

} 

function eliminarTodo(){ 

if(confirm('Esta Seguro?')){ 

sessionStorage.clear(); 

mostrar(); 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-6. Eliminando items. 

Las funciones iniciar () y nuevoitem () en el Listado 10-6 son las mismas de 
codigos previos. Solo la funcion mostrar () cambia para incorporar el manejador de 
eventos onclick y llamar a las funciones que eliminaran un item individual o vaciaran el 
espacio de almacenamiento. La lista de items presentada en pantalla es construida de la 
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misma manera que antes, pero esta vez un boton "Eliminar" es agregado junto a cada 
item para poder eliminarlo. Un boton para eliminar todos los items juntos tambien fue 
agregado en la parte superior. 

Las funciones eliminar () y eliminarTodo () se encargan de eliminar el item 
seleccionado o limpiar el espacio de almacenamiento, respectivamente. Cada funcion 
llama a la funcion mostrar () al final para actualizar la lista de items en pantalla. 

Hagalo usted mismo: Con el codigo del Listado 10-6, podra estudiar como la 
informacion es procesada por sessionStorage. Abra la plantilla del Listado 10-1 en 
su navegador, cree nuevos items y luego abra la plantilla en una nueva ventana. La 
informacion en cada ventana es diferente. La vieja ventana mantendra su 
informacion disponible y el espacio de almacenamiento de la nueva ventana estara 
vacio. A diferencia de otros sistemas (como Cookies de sesiones), para 
sessionStorage cada ventana es considerada una instancia diferente de la 
aplicacion y la informacion de la sesion no se propaga entre ellas. 

El sistema sessionStorage preserva los datos creados en una ventana solo hasta 
que esa ventana es cerrada. Es util para controlar carros de compra o cualquier otra 
aplicacion que requiere acceso a datos por periodos cortos de tiempo. 


10.3 La localStorage 

Disponer de un sistema confiable para almacenar datos durante la sesion de una ventana 
puede ser extremadamente util en algunas circunstancias, pero cuando intentamos 
simular poderosas aplicaciones de escritorio en la web, un sistema de almacenamiento 
temporario no es suficiente. 

Para cubrir este aspecto, Storage API ofrece un segundo sistema que reservara un 
espacio de almacenamiento para cada aplicacion (cada origen) y mantendra la 
informacion disponible permanentemente. Con localStorage, finalmente podemos 
grabar largas cantidades de datos y dejar que el usuario decida si la informacion es util y 
debe ser conservada o no. 

El sistema usa la misma interface que sessionStorage, debido a esto cada metodo y 
propiedad estudiado hasta el momento en este capitulo son tambien disponibles para 
localStorage. Solo la substitution del prefijo session por local es requerida para 
preparar los codigos. 


function iniciar(){ 

var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener( 1 click 1 , nuevoitem, false); 
mostrar(); 
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function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

localStorage.setltem(clave,valor); 

mostrarO ; 

document .getElementByld('clave') .value=' ' ; 
document.getElementByld('texto').value=''; 

} 

function mostrarO { 

var caj adatos=document.getElementByld('caj adatos'); 
cajadatos.innerHTML=''; 

for(var f=0;f<localStorage.length;f++){ 
var clave=localStorage.key(f); 
var valor=localStorage.getItem(clave); 

cajadatos.innerHTML+='<div>'+clave+' - '+valor+'</div>'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 10-7. Usando IstSgUlStorage. 

En el Listado 10-7, simplemente reemplazamos sessionStorage por localStorage 
en el codigo de uno de los ejemplos anteriores. Ahora, cada item creado sera preservado a 
traves de diferentes ventanas e incluso luego de que todas las ventanas del navegador son 
cerradas. 

Hagalo usted mismo: Usando la plantilla del Listado 10-1, pruebe el codigo del 
Listado 10-7. Este codigo creara un nuevo item con la informacion insertada en el 
formulario y automaticamente listara todos los items disponibles en el espacio de 
almacenamiento reservado para esta aplicacion. Cierre el navegador y abra el 
archivo HTML nuevamente. La informacion es preservada, por lo que podra ver 
aun en pantalla todos los items ingresados previamente. 

Evento storage 

Debido a que localStorage hace que la informacion este disponible en cada ventana 
donde la aplicacion fue cargada, surgen al menos dos problemas: debemos resolver como 
estas ventanas se comunicaran entre si y como haremos para mantener la informacion 
actualizada en cada una de ellas. En respuesta a ambos problemas, la especificacion 
incluye el evento storage. 

storage Este evento sera disparado por la ventana cada vez que un cambio ocurra en el 
espacio de almacenamiento. Puede ser usado para informar a cada ventana abierta 
con la misma aplicacion que los datos han cambiado en el espacio de almacenamiento 
y que se debe hacer algo al respecto. 
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function iniciar(){ 

var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener( 1 click 1 , nuevoitem, false); 

window.addEventListener("storage", mostrar, false); 

mostrar() ; 

} 

function nuevoitem(){ 

var clave=document.getElementByld('clave').value; 
var valor=document.getElementByld('texto').value; 

localStorage.setltem(clave,valor) ; 
mostrar(); 

document.getElementByld('clave').value=' 1 ; 
document.getElementByld('texto').value= 1 '; 

} 

function mostrar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
cajadatos.innerHTML=' 1 ; 

for(var f=0;f<localStorage.length;f++){ 
var clave=localStorage.key(f); 
var valor=localStorage.getltem(clave); 

cajadatos.innerHTML+= 1 <div> 1 +clave+ 1 - 1 +valor+ 1 </div>'; 

} 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 10-8. Escuchando al evento storage para mantener la lista de Items actualizada. 

Solo necesitamos comenzar a escuchar al evento storage en la funcion iniciar () 
del codigo 10-8 para ejecutar la funcion mostrar () en cada ventana siempre que un item 
es creado, modificado o eliminado. Ahora, si algo cambia en una ventana, el cambio sera 
mostrado automaticamente en el resto de las ventanas que estan ejecutando la misma 
aplicacion. 

Espacio de almacenamiento 

La informacion almacenada por localStorage sera permanente a menos que el usuario 
decida que ya no la necesita. Esto significa que el espacio fisico en el disco duro ocupado 
por esta informacion probablemente crecera cada vez que la aplicacion sea usada. Hasta 
este momento, la especificacion de HTML5 recomienda a los fabricantes de navegadores 
que reserven un minimo de 5 megabytes para cada origen (cada sitio web o aplicacion). 

Esta es solo una recomendacion que probablemente cambiara dramaticamente en los 
proximos anos. Algunos navegadores estan consultando al usuario si expandir o no el 
espacio disponible cuando la aplicacion lo necesita, pero usted deberia ser consciente de 
esta limitacion y tenerla en cuenta a la hora de desarrollar sus aplicaciones. 
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IMPORTANTE: Muchos navegadores solo trabajan de forma adecuada con esta 
API cuando la fuente es un servidor real. Para probar los siguientes codigos, le 
recomendamos que primero suba los archivos a su servidor. 


10.4 Referenda rapida 

Con la ayuda de la API Web Storage, ahora las aplicaciones web pueden ofrecer un espacio 
de almacenamiento. Usando un par clave/valor, la informacion es almacenada en el 
ordenador del usuario para un rapido acceso o para trabajar desconectado de la red. 

Tipo de almacenamiento 

Dos mecanismos diferentes son ofrecidos para almacenar datos: 

sessionStorage Este mecanismo mantiene la informacion almacenada solo disponible para 
una simple ventana y solo hasta que la ventana es cerrada. 
localStorage Este mecanismo almacena datos de forma permanente. Estos datos son 
compartidos por todas las ventanas que estan ejecutando la misma aplicacion y 
estaran disponibles a menos que el usuario decida que ya no los necesita. 

Metodos 

La API incluye una interface comun para cada mecanismo que cuenta con nuevos metodos, 
propiedades y eventos: 

setltem(clave, valor) Este metodo crea un nuevo item que es almacenado en el espacio de 
almacenamiento reservado para la aplicacion. El item esta compuesto por un par 
clave/valor creado a partir de los atributos clave y valor. 
getltem(clave) Este metodo lee el contenido de un item identificado por la clave 
especificada por el atributo clave. El valor de esta clave debe ser el mismo usado 
cuando el item fue creado con el metodo setitemO . 
key(indice) Este metodo retorna la clave del item encontrado en la posicion especificada 
por el atributo Indice dentro del espacio de almacenamiento. 
removeltem(clave) Este metodo elimina un item con la clave especificada por el atributo 
clave. El valor de esta clave debe ser el mismo usado cuando el item fue creado por el 
metodo setitemO. 

clear() - Este metodo elimina todos los items en el espacio de almacenamiento reservado 
para la aplicacion. 
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Propiedades 

length Esta propiedad retorna el numero de items disponibles en el espacio de 
almacenamiento reservado para la aplicacion. 

Eventos 

storage Este evento es disparado cada vez que un cambio se produce en el espacio de 
almacenamiento reservado para la aplicacion. 
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11.1 Una API de bajo nivel 

La API estudiada en el capftulo anterior es util para almacenamiento de pequenas 
cantidades de datos, pero cuando se trata de grandes cantidades de datos estructurados 
debemos recurrir a un sistema de base de datos. La API IndexedDB es la solucion provista 
por HTML5 a este respecto. 

IndexedDB es un sistema de base de datos destinado a almacenar informacion 
indexada en el ordenador del usuario. Fue desarrollada como una API de bajo nivel con la 
intencion de permitir un amplio espectro de usos. Esto la convierte en una de las API mas 
poderosa de todas, pero tambien una de las mas complejas. El objetivo fue proveer la 
estructura mas basica posible para permitir a los desarrolladores construir librerfas y crear 
interfaces de alto nivel para satisfacer necesidades especfficas. En una API de bajo nivel 
como esta tenemos que hacernos cargo de cada aspecto y controlar las condiciones de 
cada proceso en toda operacion realizada. El resultado es una API a la que la mayorfa de 
los desarrolladores tardara en acostumbrarse y probablemente utilizara de forma 
indirecta a traves de otras librerfas populares construidas sobre ella que seguramente 
surgiran en un futuro cercano. 

La estructura propuesta por IndexedDB es tambien diferente de SQL u otros sistemas 
de base de datos populares. La informacion es almacenada en la base de datos como 
objetos (registros) dentro de lo que es llamado Almacenes de Objetos (tablas). Los 
Almacenes de Objetos no tienen una estructura especffica, solo un nombre e indices para 
poder encontrar los objetos en su interior. Estos objetos tampoco tienen una estructura 
definida, pueden ser diferentes unos de otros y tan complejos como necesitemos. La unica 
condition para los objetos es que contengan al menos una propiedad declarada como 
fndice para que sea posible encontrarlos en el Almacen de Objetos. 

Base de datos 

La base de datos misma es simple. Debido a que cada base de datos es asociada con un 
ordenador y un sitio web o aplicacion, no existen usuarios para agregar o restricciones de 
acceso que debamos considerar. Solo necesitamos especificar el nombre y la version, y la 
base de datos estara lista. 

La interface declarada en la especificacion para esta API provee el atributo indexedDB 
y el metodo open() para crear la base de datos. Este metodo retorna un objeto sobre el 
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cual dos eventos seran disparados para indicar el exito o los errores surgidos durante el 
proceso de creacion de la base de datos. 

El segundo aspecto que debemos considerar para crear o abrir una base de datos es la 
version. La API requiere que una version sea asignada a la base de datos. Esto es para 
preparar al sistema para futuras migraciones. Cuando tenemos que actualizar la 
estructura de una base de datos en el lado del servidor para agregar mas tablas o Indices, 
normalmente detenemos el servidor, migramos la informacion hacia la nueva estructura y 
luego encendemos el servidor nuevamente. Sin embargo, en este caso la informacion es 
contenida del lado del cliente y, por supuesto, el ordenador del usuario no puede ser 
apagado. Como resultado, la version de la base de datos debe ser cambiada y luego la 
informacion migrada desde la vieja a la nueva version. 

Para trabajar con versiones de bases de datos, la API ofrece la propiedad version y el 
metodo setVersionO . La propiedad retorna el valor de la version actual y el metodo 
asigna un nuevo valor de version a la base de datos en uso. Este valor puede ser numerico 
o cualquier cadena de texto que se nos ocurra. 

Objetos y Almacenes de Objetos 

Lo que solemos llamar registros, en IndexedDB son llamados objetos. Estos objetos 
incluyen propiedades para almacenar e identificar valores. La cantidad de propiedades y 
como los objetos son estructurados es irrelevante. Solo deben incluir al menos una 
propiedad declarada como indice para poder encontrarlos dentro del Almacen de Objetos. 

Los Almacenes de Objetos (tablas) tampoco tienen una estructura especifica. Solo el 
nombre y uno o mas indices deben ser declarados en el momento de su creacion para 
poder encontrar objetos en su interior mas tarde. 


Almacen de Objetos 


Objeto 1 

Objeto 2 


Id 

Nombre 

DVD 

Video 


Id 

Nombre 

DVD 


Objeto 3 

Objeto 4 


Id 

Nombre 

DVD 

Libro 


Id 

Nombre 

Libro 





Figura 11-1. Objetos con diferentes propiedades almacenados en un Almacen de Objetos. 
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Como podemos ver en la Figura 11-1, un Almacen de Objetos contiene diversos 
objetos con diferentes propiedades. Algunos objetos tienen una propiedad dvd, otros 
tienen una propiedad Libro, etc... Cada uno tiene su propia estructura, pero todos 
deberan tener al menos una propiedad declarada como indice para poder ser 
encontrados. En el ejemplo de la Figura 11-1, este indice podria ser la propiedad id. 

Para trabajar con objetos y Almacenes de Objetos solo necesitamos crear el Almacen 
de Objetos, declarar las propiedades que seran usadas como indices y luego comenzar a 
almacenar objetos en este almacen. No necesitamos pensar acerca de la estructura o el 
contenido de los objetos en este momento, solo considerar los indices que vamos a 
utilizar para encontrarlos mas adelante en el almacen. 

La API provee varios metodos para manipular Almacenes de Objetos: 

createObjectStore(nombre, clave, autolncremento) Este metodo crea un nuevo Almacen 
de Objetos con el nombre y la configuracion declarada por sus atributos. El atributo 
nombre es obligatorio. El atributo clave declarara un indice comun para todos los 
objetos. Y el atributo autolncremento es un valor booleano que determina si el 
Almacen de Objetos tendra un generador de claves automatico. 
objectStore(nombre) Para acceder a los objetos en un Almacen de Objetos, una transaccion 
debe ser iniciada y el Almacen de Objetos debe ser abierto para esa transaccion. Este 
metodo abre el Almacen de Objetos con el nombre declarado por el atributo nombre. 
deleteObjectStore(nombre) Este metodo destruye un Almacen de Objetos con el nombre 
declarado por el atributo nombre. 

Los metodos createObjectStore () y deleteObjectStoreO, asi como otros 
metodos responsables de la configuracion de la base de datos, pueden solo ser aplicados 
cuando la base de datos es creada o mejorada en una nueva version. 

Indices 

Para encontrar objetos en un Almacen de Objetos necesitamos declarar algunas 
propiedades de estos objetos como indices. Una forma facil de hacerlo es declarar el 
atributo clave en el metodo createObjectStore (). La propiedad declarada como 
clave sera un indice comun para cada objeto almacenado en ese Almacen de Objetos 
particular. Cuando declaramos el atributo clave, esta propiedad debe estar presente en 
todos los objetos. 

Ademas del atributo clave podemos declarar todos los indices que necesitemos para 
un Almacen de Objetos usando metodos especiales provistos para este proposito: 

createlndex(nombre, propiedad, unico) Este metodo crea un indice para un Almacen de 
Objetos especifico. El atributo nombre es un nombre con el que identificar al indice, el 
atributo propiedad es la propiedad que sera usada como indice, y unique es un valor 
booleano que indica si existe la posibilidad de que dos o mas objetos compartan el 
mismo valor para este indice. 
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index(nombre) Para usar un indice primero tenemos que crear una referenda al indice y 
luego asignaresta referencia a la transaccion. El metodo index () crea esta referenda 
para el rndice declarado en el atributo nombre. 
deletelndex(nombre) Si ya no necesitamos un indice podemos eliminarlo usando este 
metodo. 

Transacciones 

Un sistema de base de datos trabajando en un navegador debe contemplar algunas 
circunstancias unicas que no estan presentes en otras plataformas. El navegador puede 
fallar, puede ser cerrado abruptamente, el proceso puede ser detenido por el usuario, o 
simplemente otro sitio web puede ser cargado en la misma ventana, por ejemplo. Existen 
muchas situaciones en las que trabajar directamente con la base de datos puede causar 
mal funcionamiento o incluso corrupcion de datos. Para prevenir que algo asi suceda, cada 
accion es realizada por medio de transacciones. 

El metodo que genera una transaccion se llama transaction () . Para declarar el tipo 
de transaccion, contamos con los siguientes tres atributos: 

READ_ONLY Este atributo genera una transaccion de solo lectura. Modificaciones no son 
permitidas. 

READ_WRITE Usando este tipo de transaccion podemos leer y escribir. Modificaciones son 
permitidas. 

VERSION CHANGE Este tipo de transaccion es solo utilizada para actualizar la version de 
la base de datos. 

Las mas comunes son las transacciones de lectura y escritura. Sin embargo, para 
prevenir un uso inadecuado, el tipo READ_ONLY (solo lectura) es configurado por defecto. 
Por este motivo, cuando solo necesitamos obtener informacion de la base de datos, lo 
unico que debemos hacer es declarar el destino de la transaccion (normalmente el 
nombre del Almacen de Objetos de donde vamos a leer esta informacion). 

Metodos de Almacenes de Objetos 

Para interactuar con Almacenes de Objetos, leer y almacenar informacion, la API provee 
varios metodos: 

add(objeto) Este metodo recibe un par clave/valor o un objeto conteniendo varios pares 
clave/valor, y con los datos provistos genera un objeto que es agregado al Almacen de 
Objetos seleccionado. Si un objeto con el mismo valor de indice ya existe, el metodo 
add() retorna un error. 

put(objeto) Este metodo es similar al anterior, excepto que si ya existe un objeto con el 
mismo valor de indice lo sobrescribe. Es util para modificar un objeto ya almacenado 
en el Almacen de Objetos seleccionado. 
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get(clave) Podemos leer un objeto especifico del Almacen de Objetos usando este 
metodo. El atributo clave es el valor del Indice del objeto que queremos leer. 
delete(clave) Para eliminar un objeto del Almacen de Objetos seleccionado solo tenemos 
que llamar a este metodo con el valor del Indice del objeto a eliminar. 


11.2 Implementando IndexedDB 

iSuficiente con la teoria! Es momento de crear nuestra primera base de datos y aplicar 
algunos de los metodos ya mencionados en este capitulo. Vamos a simular una aplicacion 
para almacenar informacion sobre peliculas. Puede agregar a la base los datos que usted 
desee, pero para referenda, de aqui en adelante vamos a mencionar los siguientes: 

id: tt0068646 nombre: El Padrino fecha: 1972 
id: tt0086567 nombre: Juegos de Guerra fecha: 1983 
id: tt0111161 nombre: Cadena Perpetua fecha: 1994 
id: ttl285016 nombre: La Red Social fecha: 2010 

IMPORTANTE: Los nombres de las propiedades (id, nombre y fecha) son los que 
vamos a utilizar para nuestros ejemplos en el resto del capitulo. La informacion 
fue recolectada del sitio web www.imdb.com, pero usted puede utilizar su propia 
lista o informacion al azar para probar los codigos. 

Plantilla 

Como siempre, necesitamos un documento HTML y algunos estilos CSS para crear las cajas 
en pantalla que contendran el formulario apropiado y la informacion retornada. El 
formulario nos permitira insertar nuevas peliculas dentro de la base de datos 
solicitandonos una clave, el titulo y el ano en el que la pelicula fue realizada. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>IndexedDB API</title> 

clink rel="stylesheet" href="indexed.css"> 

<script src="indexed.j s"></script> 

</head> 

<body> 

csection id="cajaformulario"> 
cform name="formulario"> 

<p>Clave:cbrxinput type="text" name="clave" id="clave"></p> 
<p>Titulo:<brxinput type="text" name="texto" id="texto"x/p> 
cp>Ano: cbrxinput type="text" name="fecha" id="fecha"x/p> 
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<p><input type="button" name="grabar" id="grabar" 

value="Grabar"> </p > 

</form> 

</section> 

<section id="cajadatos"> 

No hay informacion disponible 
</section> 

</body> 

</html> 


Listado 11-1. Plantilla para IndexedDB API. 

Los estilos CSS definen las cajas para el formulario y como mostrar la informacion en 
pantalla: 


#cajaformulario{ 
float: left; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 40Opx; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#clave, #texto{ 
width: 20Opx; 

} 

ttcajadatos > div{ 
padding: 5px; 

border-bottom: lpx solid #999999; 

} 


Listado 11-2. Estilos para las cajas. 

Hagalo usted mismo: Necesitara un archivo HTML para la plantilla del Listado 11- 
1, un archivo CSS llamado indexed.css para los estilos del Listado 11-2 y un 
archivo Javascript llamado indexed, js para introducir todos los codigos 
estudiados a continuacion. 

Abriendo la base de datos 

Lo primero que debemos hacer en el codigo Javascript es abrir la base de datos. El atributo 
indexedDB y el metodo open() abren la base con el nombre declarado o crean una 
nueva si no existe: 
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function iniciar(){ 

caj adatos=document.getElementByld('caj adatos 1 ); 
var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener('click', agregarobjeto, false); 

if( 1 webkitIndexedDB 1 in window){ 

window.indexedDB=window.webkitIndexedDB; 
window.IDBTransaction=window.webkitIDBTransaction; 
window.IDBKeyRange=window.webkitIDBKeyRange; 
window.IDBCursor=window.webkitIDBCursor; 

}else if('mozIndexedDB' in window){ 
window.indexedDB=window.mozIndexedDB; 


var solicitud=indexedDB.open('mibase'); 
solicitud.addEventListener('error 1 , errores, false); 
solicitud.addEventListener( 1 success 1 , crear, false); 


Listado 11-3. Abriendo la base de datos. 

La funcion iniciar () del Listado 11-3 prepara los elementos de la plantilla y abre la 
base de datos. La instruction indexedDB. open () intenta abrir la base de datos con el 
nombre mibase y retorna el objeto solicitud con el resultado de la operacion. Los 
eventos error o success son disparados sobre este objeto en caso de error o exito, 
respectivamente. 

IMPORTANTE: Al momento de escribir estas lineas la API se encuentra en estado 
experimental. Algunos atributos, incluyendo indexedDB, necesitan el prefijo del 
navegador para trabajar apropiadamente. Antes de abrir la base de datos en la 
funcion iniciar () detectamos la existencia de webkitindexedDB o 
mozIndexedDB y preparamos los atributos para cada uno de estos navegadores 
especificos (Google Chrome o Firefox). Luego de que este periodo experimental 
termine podremos eliminar el condicional if al comienzo del codigo del Listado 
11-3 y utilizar los metodos reales. 

Los eventos son una parte importante de esta API. IndexedDB es una API sincrona y 
asincrona. La parte sincrona esta siendo desarrollada en estos momentos y esta destinada 
a trabajar con la API Web Workers. En cambio, la parte asincrona esta destinada a un uso 
web normal y ya se encuentra disponible. Un sistema asincrono realiza tareas detras de 
escena y retorna los resultados posteriormente. Con este proposito, esta API dispara 
diferentes eventos en cada operacion. Cada accion sobre la base de datos y su contenido 
es procesada detras de escena (mientras el sistema ejecuta otros codigos) y los eventos 
correspondientes son disparados luego para informar los resultados obtenidos. 

Luego de que la API procesa la solicitud para la base de datos, un evento error o 
success es disparado de acuerdo al resultado y una de las funciones errores 0 o 
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crearl) es ejecutada para controlar los errores o continuar con la definicion de la base 
de datos, respectivamente. 

Version de la base de datos 

Antes de comenzar a trabajar en el contenido de la base de datos, debemos seguir algunos 
pasos para completar su definicion. Como dijimos anteriormente, las bases de datos 
IndexedDB usan versiones. Cuando la base de datos es creada, un valor null (nulo) es 
asignado a su version. Por lo tanto, controlando este valor podremos saber si la base de 
datos es nueva o no: 


function errores(e){ 

alert('Error: '+e.code+' '+e.message); 

} 

function crear(e){ 

bd=e.result || e.target.result; 
if(bd.version== 1 '){ 

var solicitud=bd.setVersion('1.0'); 

solicitud.addEventListener('error 1 , errores, false); 
solicitud.addEventListener( 1 success 1 , crearbd, false); 

} 

} 


Listado 11-4. Dedarando la version y respondiendo a eventos. 

Nuestra funcion errores () es simple (no necesitamos procesar errores para esta 
aplicacion de muestra). En este ejemplo solo usamos los atributos code y message de la 
interface IDBErrorEvent para generar un mensaje de alerta en caso de error. La funcion 
crearl), por otro lado, sigue los pasos correctos para detectar la version de la base de 
datos y proveer un valor de version en caso de que sea la primera vez que la aplicacion es 
ejecutada en este ordenador. La funcion asigna el objeto result creado por el evento a la 
variable bd y usa esta variable para representar la base de datos (esta variable se definio 
como global para referenciar la base de datos en el resto del codigo). 

IMPORTANTE: En este momento algunos navegadores envfan el objeto result a 
traves del evento y otros a traves del elemento que disparo el evento. Para 
seleccionar la referenda correcta de forma automatica, usamos la logica 
e.result || e. target.result. Seguramente usted debera usar solo uno de 
estos valores en sus aplicaciones cuando las implementaciones esten listas. 

La interface IDBDatabase provee la propiedad version para informar el valor de la 
version actual y tambien provee el metodo setVersion () para declarar una nueva 
version. Lo que hacemos en la funcion crearl) en el Listado 11-4 es detectar el valor 
actual de la version de la base de datos y declarar uno nuevo si es necesario (en caso de 
que el valor sea una cadena de texto vacfa). Si la base de datos ya existe, el valor de la 


222 



API IndexedDB 


propiedad version sera diferente de null (nulo) y no tendremos que configurar nada, 
pero si esta es la primera vez que el usuario utiliza esta aplicacion entonces deberemos 
declarar un nuevo valor para la version y configurar la base de datos. 

El metodo setVersionO recibe una cadena de texto que puede ser un numero o 
cualquier valor que se nos ocurra, solo debemos estar seguros de que siempre usamos el 
mismo valor en cada codigo para abrir la version correcta de la base de datos. Este 
metodo es, as! como cualquier otro procedimiento en esta API, aslncrono. La version sera 
establecida detras de escena y el resultado sera informado al codigo principal a traves de 
eventos. Si ocurre un error en el proceso, llamamos a la funcion erroresO como lo 
hicimos anteriormente, pero si la version es establecida correctamente entonces la 
funcion crearbdO es llamada para declarar los Almacenes de Objetos e Indices que 
usaremos en esta nueva version. 

Almacenes de Objetos e indices 

A este punto debemos comenzar a pensar sobre la clase de objetos que vamos a 
almacenar y como vamos a leer mas adelante la informacion contenida en los Almacenes 
de Objetos. Si hacemos algo mal o queremos agregar algo en la configuracion de nuestra 
base de datos en el futuro deberemos declarar una nueva version y migrar los datos desde 
la anterior, por lo que es importante tratar de organizar todo lo mejor posible desde el 
principio. Esto es debido a que la creacion de Almacenes de Objetos e Indices solo es 
posible durante una transaccion setversion. 


function crearbdO { 

var almacen=bd.createObjectStore('peliculas',{keyPath:'id'}); 
almacen.createlndex('BuscarFecha', 'fecha',{unique: false}); 

} 


Listado 11-5. Dedarando Almacenes de Objetos e indices. 

Para nuestro ejemplo solo necesitamos un Almacen de Objetos (para almacenar peliculas) 
y dos Indices. El primer Indice, id, es declarado como el atributo clave para el metodo 
createObjectStore () cuando el Almacen de Objetos es creado. El segundo Indice es 
asignado al Almacen de Objetos usando el metodo createlndex (). Este Indice fue 
identificado con el nombre BuscarFecha y declarado para la propiedad fecha (esta 
propiedad es ahora un Indice). Mas adelante vamos a usar este Indice para ordenar peliculas 
porano. 

Agregando Objetos 

Por el momento tenemos una base de datos con el nombre mibase que tendra el valor de 
version l . 0 y contendra un Almacen de Objetos llamado peliculas con dos Indices: id y 
fecha. Con esto ya podemos comenzar a agregar objetos en el almacen: 
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function agregarobjeto(){ 

var clave=document.getElementByld('clave').value; 
var titulo=document.getElementByld('texto').value; 
var fecha=document.getElementByld('fecha').value; 

var transaccion=bd.transaction(['peliculas'], 

IDBTransaction.READ_WRITE); 
var almacen=transaccion.objectStore('peliculas'); 

var solicitud=almacen.add({id: clave, nombre: titulo, fecha: 

fecha}); 

solicitud.addEventListener('success', function(){ 

mostrar(clave) }, false); 


document.getElementByld('clave').value=' 
document.getElementByld('texto').value=' 
document.getElementByld('fecha').value=' 


Listado 11-6. Agregando objetos. 

Al comienzo de la funcion iniciar () habfamos agregado al boton del formulario una 
escucha para el evento click. Esta escucha ejecuta la funcion agregarobj eto 0 
cuando el evento es disparado (el boton es presionado). Esta funcion toma los valores de 
los campos del formulario (clave, texto y fecha) y luego genera una transaccion para 
almacenar un nuevo objeto usando esta informacion. 

Para comenzar la transaccion, debemos usar el metodo transaction (), especificar 
el Almacen de Objetos involucrado en la transaccion y el tipo de transaccion a realizar. En 
este caso el almacen es peliculas y el tipo es declarado como read write. 

El proximo paso es seleccionar el Almacen de Objetos que vamos a usar. Debido a que 
la transaccion puede ser originada para varios Almacenes de Objetos, tenemos que 
declarar cual corresponde con la siguiente operacion. Usando el metodo ob j ectstore () 
abrimos el Almacen de Objetos y lo asignamos a la transaccion con la siguiente linea: 
transaccion.objectstore('peliculas 1 ). 

Es momento de agregar el objeto al Almacen de Objetos. En este ejemplo usamos el 
metodo add() debido a que queremos crear un nuevo objeto, pero podriamos haber 
utilizado el metodo put 0 en su lugar si nuestra intension hubiese sido modificar un viejo 
objeto. El metodo add() genera el objeto usando las propiedades id, nombre y fecha y 
las variables clave, titulo y fecha. 

Finalmente, escuchamos al evento disparado por esta solicitud y ejecutamos la funcion 
mostrar () en caso de exito. Existe tambien un evento error, por supuesto, pero como 
la respuesta a los errores depende de lo que usted quiera para su aplicacion, no 
consideramos esa posibilidad en este ejemplo. 
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Leyendo Objetos 

Si el objeto es correctamente almacenado, el evento success es disparado y la funcion 
mostrarO es ejecutada. En el codigo del Listado 11-6, esta funcion fue llamada dentro 
de una funcion anonima para poder pasar la variable clave. Ahora vamos a tomar este 
valor para leer el objeto previamente almacenado: 


function mostrar(clave){ 

var transaccion=bd.transaction( ['peliculas']); 
var almacen=transaccion.objectStore('peliculas'); 
var solicitud=almacen.get(clave); 

solicitud.addEventListener( 1 success', mostrarlista, false); 


function mostrarlista(e){ 

var resultado=e.result || e.target.result; 

cajadatos.innerHTML='<div> 1 +resultado.id+ 1 - '+resultado.nombre+ 1 
- '+resultado.fecha+'</div>', 


Listado 11-7. Leyendo y mostrando el objeto almacenado. 

El codigo del Listado 11-7 genera una transaccion read only y usa el metodo get () 
para leer el objeto con la clave recibida. No tenemos que declarar el tipo de transaccion 
porque read only es establecido por defecto. 

El metodo get() retorna el objeto almacenado con la propiedad id=clave. Si, por 
ejemplo, insertamos la pelicula El Padrino de nuestra lista, la variable clave tendra el 
valor "tt0068646". Este valor es recibido por la funcion mostrar () y usado por el metodo 
get() para leer la pelicula El Padrino. Como puede ver, este codigo es solo ilustrativo ya 
que solo puede retornar la misma pelicula que acabamos de almacenar. 

Como cada operation es asincrona, necesitamos dos funciones para mostrar la 
information. La funcion mostrarO genera la transaccion y lee el objeto, y la funcion 
mostrarlista 0 muestra los valores de las propiedades del objeto en pantalla. Otra vez, 
solo estamos escuchando al evento success, pero un evento error podria ser disparado 
en caso de que el objeto no pueda ser leido por alguna circunstancia en particular. 

La funcion mostrarlista () recibe un objeto. Para acceder a sus propiedades solo 
tenemos que usar la variable representando al objeto y el nombre de la propiedad, como 
en resultado. id (la variable resultado representa el objeto e id es una de sus 
propiedades). 

Finalizando el codigo 

Del mismo modo que cualquier codigo previo, el ejemplo debe ser finalizado agregando 
una escucha para el evento load que ejecute la funcion iniciar () tan pronto como la 
aplicacion es cargada en la ventana del navegador: 
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window.addEventListener('load 1 , iniciar, false); 


Listado 11-8. Iniciando la aplicacion. 

Hagalo usted mismo: Es momento de probar la aplicacion en el navegador. Copie 
todos los codigos Javascript desde el Listado 11-3 al Listado 11-8 en el archivo 
indexed, js y abra el documento HTML del Listado 11-1. Usando el formulario en 
la pantalla, inserte informacion acerca de las peliculas listadas al comienzo de este 
capitulo. Cada vez que una nueva pelicula es insertada, la misma informacion es 
mostrada en la caja de la derecha. 


11.3 Listando datos 

El metodo get () implementado en el codigo del Listado 11-7 solo retorna un objeto por 
vez (el ultimo insertado). En el siguiente ejemplo vamos a usar un cursor para generar una 
lista incluyendo todas las peliculas almacenadas en el Almacen de Objetos peliculas. 

Cursores 

Los cursores son una alternativa ofrecida por la API para obtener y navegar a traves de un 
grupo de objetos encontrados en la base de datos. Un cursor obtiene una lista especifica 
de objetos de un Almacen de Objetos e inicia un puntero que apunta a un objeto de la 
lista a la vez. 

Para generar un cursor, la API provee el metodo openCursor (). Este metodo extrae 
informacion del Almacen de Objetos seleccionado y retorna un objeto IDBCursor que tiene 
sus propios atributos y metodos para manipular el cursor: 

continue() Este metodo mueve el puntero del cursor una posicion y el evento success 
del cursor es disparado nuevamente. Cuando el puntero alcanza el final de la lista, el 
evento success es tambien disparado, pero retorna un objeto vacio. El puntero 
puede ser movido a una posicion especifica declarando un valor de indice dentro de 
los parentesis. 

delete() Este metodo elimina el objeto en la posicion actual del cursor. 
update(valor) Este metodo es similar a put() pero modifica el valor del objeto en la posicion 
actual del cursor. 

El metodo openCursor () tambien tiene atributos para especificar el tipo de objetos 
retornados y su orden. Los valores por defecto retornan todos los objetos disponibles en 
el Almacen de Objetos seleccionado, organizados en orden ascendente. Estudiaremos este 
tema mas adelante. 
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function iniciar(){ 

caj adatos=document.getElementByld('caj adatos 1 ); 
var boton=document.getElementByld('grabar 1 ); 
boton.addEventListener('click', agregarobjeto, false); 
if( 1 webkitIndexedDB 1 in window){ 

window.indexedDB=window.webkitIndexedDB; 
window.IDBTransaction=window.webkitIDBTransaction; 
window.IDBKeyRange=window.webkitIDBKeyRange; 
window.IDBCursor=window.webkitIDBCursor; 

}else if('mozIndexedDB' in window){ 
window.indexedDB=window.mozIndexedDB; 

} 

var solicitud=indexedDB.open('mibase'); 

solicitud.addEventListener( 1 error 1 , errores, false); 

solicitud.addEventListener( 1 success 1 , crear, false); 

} 

function errores(e){ 

alert('Error: '+e.code+' '+e.message); 

} 

function crear(e){ 

bd=e.result || e.target.result; 
if(bd.version== 1 '){ 

var solicitud=bd.setVersion('1.0'); 

solicitud.addEventListener('error 1 , errores, false); 
solicitud.addEventListener( 1 success', crearbd, false); 

}else{ 

mostrar (); 

} 

} 

function crearbd(){ 

var almacen=bd.createObjectStore('peliculas',{keyPath: 'id'}); 
almacen.createlndex('BuscarFecha', 1 fecha 1 ,{unique: false}); 

} 

function agregarobjeto(){ 

var clave=document.getElementByld('clave').value; 
var titulo=document.getElementByld( 1 texto 1 ).value; 
var fecha=document.getElementByld('fecha').value; 
var transaccion=bd.transaction(['peliculas'], 

IDBTransaction.READ_WRITE); 
var almacen=transaccion.objectStore('peliculas'); 
var solicitud=almacen.add({id: clave, nombre: titulo, fecha: 

fecha}); 

solicitud.addEventListener('success', mostrar, false); 
document.getElementByld('clave').value=''; 
document.getElementByld('texto').value=''; 
document.getElementByld('fecha').value=''; 

} 

function mostrar(){ 

caj adatos.innerHTML= 1 '; 

var transaccion=bd.transaction(['peliculas 1 ]); 
var almacen=transaccion.objectStore('peliculas 1 ); 
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var oursor=almacen.openCursor(); 

cursor.addEventListener ( 1 success 1 , mostrarlista, false); 

} 

function mostrarlista(e){ 

var cursor=e.result || e.target.result; 
if(cursor){ 

caj adatos.innerHTML+='<div>'+cursor.value.id+' - 

'+cursor.value.nombre+' - '+cursor.value.fecha+ 1 </div> 1 ; 
cursor.continue(); 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 11-9. Lista de objetos. 

El Listado 11-9 muestra el codigo Javascript completo que necesitamos para este 
ejemplo. De las funciones usadas para configurar la base de datos, solo crear () presenta 
un pequeno cambio. Ahora, cuando la version de la base de datos sea diferente a null (lo 
que significa que la base de datos ya ha sido creada) la funcion mostrar () es ejecutada. 
Esta funcion ahora se encuentra a cargo de mostrar la lista de objetos almacenados en el 
Almacen de Objetos, por lo que si la base de datos ya existe veremos una lista de objetos 
en la caja derecha de la pantalla tan pronto como la pagina web es cargada. 

La mejora introducida en este codigo se encuentra en las funciones mostrar () y 
mostrarlista (). Aqui es donde trabajamos con cursores por primera vez. 

Leer informacion de la base de datos con un cursor es tambien una operacion que 
debe hacerse a traves de una transaccion. Por este motivo, lo primero que hacemos en la 
funcion mostrar () es generar una transaccion del tipo read only sobre el Almacen de 
Objetos peliculas. Este Almacen de Objetos es seleccionado como el involucrado en la 
transaccion y luego el cursor es abierto sobre este almacen usando el metodo 
openCursor(). 

Si la operacion es exitosa, un objeto es retornado con toda la informacion obtenida del 
Almacen de Objetos, un evento success es disparado desde este objeto y la funcion 
mostrarlista 0 es ejecutada. 

Para leer la informacion, el objeto retornado por la operacion ofrece varios atributos: 

key Este atributo retorna el valor de la clave del objeto en la posicion actual del cursor, 
value Este atributo retorna el valor de cualquier propiedad del objeto en la posicion actual 
del cursor. El nombre de la propiedad debe ser especificado como una propiedad del 
atributo (por ejemplo, value. f echa). 

direction Los objetos pueden ser leidos en orden ascendente o descendente (como 
veremos mas adelante); este atributo retorna la condicion actual en la cual son leidos. 
count Este atributo retorna en numero aproximado de objetos en el cursor. 

En la funcion mostrarlista () del Listado 11-9, usamos el condicional if para 
controlar el contenido del cursor. Si ningun objeto es retornado o el puntero alcanza el 
final de la lista, entonces el objeto estara vacio y el bucle no es continuado. Sin embargo, 
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cuando el puntero apunta a un objeto valido, la informacion es mostrada en pantalla y el 
puntero es movido hacia la siguiente posicion con continue 0 . 

Es importante mencionar que no debemos usar un bucle while aqui debido a que el 
metodo continue 0 dispara nuevamente el evento success del cursor y la funcion 
completa es ejecutada para leer el siguiente objeto retornado. 

Hagalo usted mismo: El codigo del Listado 11-9 reemplaza todos los codigos 
Javascript previos. Vacfe el archivo indexed, js y copie en su interior este nuevo 
codigo. Abra la plantilla del Listado 11-1 y, si aun no lo hizo, inserte todas las 
peliculas del listado encontrado al comienzo de este capftulo. Vera la lista 
completa de peliculas en la caja derecha de la pantalla en orden ascendente, de 
acuerdo al valor de la propiedad id. 

Cambio de orden 

Hay dos detalles que necesitamos modificar para obtener la lista que queremos. Todas las 
peliculas en nuestro ejemplo estan listadas en orden ascendente y la propiedad usada 
para organizar los objetos es id. Esta es la propiedad declarada como el atributo clave 
cuando el Almacen de Objetos peliculas fue creado, y es por tanto el indice usado por 
defecto. Pero esta clase de valores no es lo que a nuestros usuarios normalmente les 
interesa. 

Considerando esta situacion, creamos otro indice en la funcion crearbdO . El nombre 
de este indice adicional fue declarado como BuscarFecha y la propiedad asignada al 
mismo es fecha. Este indice nos permitira ordenar las peliculas de acuerdo al valor del 
ano en el que fueron filmadas. 


function mostrarf){ 

cajadatos.innerHTML=' 1 ; 

var transaccion=bd.transaction(['peliculas']); 
var almacen=transaccion.objectStore('peliculas'); 
var indice=almacen.index('BuscarFecha'); 

var cursor=indice.openCursor(null, IDBCursor.PREV); 

cursor.addEventListener('success', mostrarlista, false); 

} 


Listado 11-10. Orden descendiente por ano. 

La funcion en el Listado 11-10 reemplaza a la funcion mostrarf ) del codigo del 
Listado 11-9. Esta nueva funcion genera una transaccion, luego asigna el indice 
BuscarFecha al Almacen de Objetos usado en la transaccion, y finalmente usa 
openCursorO para obtener los objetos que tienen la propiedad correspondiente al 
indice (en este caso fecha). 
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Existen dos atributos que podemos especificar en openCursor () para seleccionar y 
ordenar la informacion obtenida por el cursor. El primer atributo declara el rango dentro 
del cual los objetos seran seleccionados y el segundo es una de las siguientes constantes: 

NEXT (siguiente). El orden de los objetos retornados sera ascendente (este es el valor por 
defecto). 

NEXT_NO_DUPLICATE (siguiente no duplicado). El orden de los objetos retornados sera 
ascendente y los objetos duplicados seran ignorados (solo el primer objeto es retornado 
si varios comparten el mismo valor de indice). 

PREV (anterior). El orden de los objetos retornados sera descendente. 
PREV_NO_DUPLICATE (anterior no duplicado). El orden de los objetos retornados sera 
descendente y los objetos duplicados seran ignorados (solo el primer objeto es 
retornado si varios comparten el mismo valor de indice). 

Con el metodo openCursor () usado en la funcion mostrarf) en el Listado 11-10, 
obtenemos los objetos en orden descendente y declaramos el rango como null. Vamos a 
aprender como construir un rango y retornar solo los objetos deseados mas adelante en 
este capltulo. 

Hagalo usted mismo: Tome el codigo anterior presentado en el Listado 11-9 y 
reemplace la funcion show() con la nueva funcion del Listado 11-10. Esta nueva 
funcion lista las peliculas en la pantalla por ano y en orden descendente (las mas 
nuevas primero). El resultado deberfa ser el siguiente: 

id: ttl285016 nombre: La Red Social fecha: 2010 
id: tt0111161 nombre: Cadena Perpetua fecha: 1994 
id: tt0086567 nombre: Juegos de Guerra fecha: 1983 
id: tt0068646 nombre: El Padrino fecha: 1972 


11.4 Eliminando datos 

Hemos aprendido como agregar, leer y listar datos. Es hora de estudiar la posibilidad de 
eliminar objetos de un Almacen de Objetos. Como mencionamos anteriormente, el 
metodo delete 0 provisto por la API recibe un valor y elimina el objeto con la clave 
correspondiente a ese valor. 

El codigo es sencillo; solo necesitamos crear un boton para cada objeto listado en 
pantalla y generar una transaccion read write para poder realizar la operacion y 
eliminar el objeto: 


function mostrarlista(e){ 

var cursor=e.result || e.target.result; 
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if(cursor){ 

cajadatos.innerHTML+= 1 <div> 1 +cursor.value.id + 1 - 

'+cursor.value.nombre+' - 1 +cursor.value.fecha+' <button 
onclick="eliminar(\' 1 +cursor.value.id+'\">Eliminar 
</buttonx/div> 1 ; 

cursor.continue(); 

} 

} 

function eliminar(clave){ 

if(confirm( 1 Esta Seguro?')){ 

var transaccion=bd.transaction(['peliculas'], 

IDBTransaction.READ_WRITE); 
var almacen=transaccion.objectStore('peliculas'); 
var solicitud=almacen.delete(clave); 

solicitud.addEventListener ( 1 success 1 , mostrar, false); 

} 

} 


Listado 11-11. Eliminando objetos. 

El boton agregado a cada pelicula en la funcion mostrarlista 0 del Listado 11-11 
contiene un manejador de eventos en linea. Cada vez que el usuario hace clic en uno de 
estos botones, la funcion eliminar () es ejecutada con el valor de la propiedad id como 
su atributo. Esta funcion genera primero una transaccion readwrite y luego usando la 
clave recibida procede a eliminar el correspondiente objeto del Almacen de Objetos 
peliculas. 

Al final, si la operacion fue exitosa, el evento success es disparado y la funcion 
mostrar () es ejecutada para actualizar la lista de peliculas en pantalla. 

Hagalo usted mismo: Tome el codigo anterior del Listado 11-9, reemplace la 
funcion mostrarlista () y agregue la funcion eliminar () del codigo del 
Listado 11-11. Finalmente, abra el documento HTML del Listado 11-1 para probar 
la aplicacion. Podra ver el listado de peliculas pero ahora cada linea incluye un 
boton para eliminar la pelicula del Almacen de Objetos. Experimente agregando y 
eliminando peliculas. 


11.5 Buscando datos 

Probablemente la operacion mas importante realizada en un sistema de base de datos es 
la busqueda. El proposito absoluto de esta clase de sistemas es indexar la informacion 
almacenada para facilitar su posterior busqueda. Como estudiamos anteriormente es este 
capitulo, el metodo get() es util para obtener un objeto por vez cuando conocemos el 
valor de su clave, pero una operacion de busqueda es usualmente mas compleja que esto. 

Para obtener una lista especifica de objetos desde el Almacen de Objetos, tenemos 
que pasar un rango como argumento para el metodo openCursor (). La API incluye la 
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interface IDBKeyRange con varios metodos y propiedades para declarar un rango y limitar 
los objetos retornados: 

only(valor) Solo los objetos con la clave que concuerda con valor son retornados. Por 
ejemplo, si buscamos peliculas por ano usando only ("1972"), solo la pellcula El 
Padrino sera retornada desde el almacen. 

bound(bajo, alto, bajoAbierto, altoAbierto) Para realmente crear un rango, debemos contar 
con valores que indiquen el comienzo y el final de la lista, y ademas especificar si esos 
valores tambien seran incluidos. El valor del atributo bajo indica el punto inicial de la 
lista y el atributo alto es el punto final. Los atributos bajoAbierto y altoAbierto 
son valores booleanos usados para declarar si los objetos que concuerdan exactamente 
con los valores de los atributos bajo y alto seran ignorados. Por ejemplo, 
bound("1972", "2010", false, true) retornara una lista de peliculas filmadas 
desde el ano 1972 hasta el ano 2010, pero no incluira las realizadas especificamente en 
el 2010 debido a que el valor es true (verdadero) para el punto donde el rango termina, 
lo que indica que el final es abierto y las peliculas de ese ano no son incluidas. 
lowerBound(valor, abierto) Este metodo crea un rango abierto que comenzara por valor 
e ira hacia arriba hasta el final de la lista. Por ejemplo, lowerBound("l983", true) 
retornara todas las peliculas hechas luego de 1983 (sin incluir las filmadas en ese ano 
en particular). 

upperBound(valor, abierto) Este es el opuesto al anterior. Creara un rango abierto, pero 
los objetos retornados seran todos los que posean un valor de indice menor a valor. 
Por ejemplo, upperBound("i983", false) retornara todas las peliculas hechas 
antes de 1983, incluyendo las realizadas ese mismo ano (el atributo abierto fue 
declarado como false). 

Preparemos primero una nueva plantilla para presentar un formulario en pantalla con 
el que se pueda buscar peliculas: 


<!DOCTYPE html> 
chtml lang="es"> 

<ti11e>IndexedDB API</title> 

<link rel="stylesheet" href="indexed.css"> 

<script src="indexed.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Buscar Pellcula por Ano: cbrxinput type=" search" 

name="fecha" id="fecha"x/p> 
<pxinput type= "button" name= "buscar" id= "buscar" 

value="Buscar"></p> 

</form> 

</section> 
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<section id="cajadatos"> 

No hay informacion disponible 
</section> 

:/body> 

:/html> 


Listado 11-12. Formulario de busqueda. 

Este nuevo documento HTML provee un boton y un campo de texto donde ingresar el 
ano para buscar peliculas de acuerdo a un rango especificado en el siguiente codigo: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 

var boton=document.getElementByld('buscar'); 

boton.addEventListener('click', buscarobjetos, false); 

if('webkitIndexedDB' in window){ 

window.indexedDB=window.webkitIndexedDB; 
window.IDBTransaction=window.webkitIDBTransaction; 
window.IDBKeyRange=window.webkitIDBKeyRange; 
window.IDBCursor=window.webkitIDBCursor; 

}else if('mozIndexedDB' in window){ 
window.indexedDB=window.mozIndexedDB; 


var solicitud=indexedDB.open('mibase'); 

solicitud.addEventListener('error', errores, false); 

solicitud.addEventListener('success', crear, false); 

} 

function errores(e){ 

alert('Error: '+e.code+' '+e.message); 

} 

function crear(e){ 

bd=e.result || e.target.result; 
if(bd.version==''){ 

var solicitud=bd.setVersion('1.0'); 

solicitud.addEventListener('error', errores, false); 
solicitud.addEventListener('success', crearbd, false); 

} 

} 

function crearbd(){ 

var almacen=bd.createObjectStore('peliculas', {keyPath: 'id'}); 
almacen.createlndex('BuscarFecha', 'fecha', { unique: false }); 

} 

function buscarobjetos (){ 
cajadatos.innerHTML=''; 

var buscar=document.getElementByld('fecha').value; 

var transaccion=bd.transaction(['peliculas']); 
var almacen=transaccion.objectStore('peliculas'); 
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var indice=almacen. index ( 1 BuscarFecha 1 ) ji 
var rango=IDBKeyRange.only(buscar); 

var cursor=indice.openCursor(rango); 

cursor.addEventListener('success', mostrarlista, false); 

} 

function mostrarlista(e){ 

var cursor=e.result || e.target.result; 
if(cursor){ 

cajadatos.innerHTML+= 1 <div> 1 +cursor.value.id+ 1 - 

'+cursor.value.nombret' - '+cursor.value.fecha+'</div> 1 ; 
cursor.continue(); 


window.addEventListener('load 1 , iniciar, false); 


Listado 11-13. Buscando peliculas. 

La funcion buscarobjetos 0 es la mas importante del Listado 11-13. En esta funcion 
generamos una transaction de solo lectura read only para el Almacen de Objetos 
peliculas, seleccionamos el indice BuscarFecha para usar la propiedad fecha como 
Indice, y creamos un rango desde el valor de la variable buscar (el ano insertado en el 
formulario por el usuario). El metodo usado para construir el rango es oniy(), pero puede 
probar con cualquiera de los metodos estudiados. Este rango es pasado luego como un 
argumento del metodo openCursor (). Si la operacion es exitosa, la funcion 
mostrarlista 0 imprimira en pantalla la lista de peliculas del ano seleccionado. 

El metodo only () retorna solo las peliculas que concuerdan exactamente con el valor 
de la variable buscar. Para probar otros metodos, puede proveer valores por defecto 
para completar el rango, por ejemplo bound (buscar, "2011", false, true). 

El metodo openCursor () puede tomar dos posibles atributos al mismo tiempo. Por 
esta razon, una instruccion como openCursor (rango, iDBCursor.PREV) es valida y 
retornara los objetos en el rango especificado y en orden descendente (usando como 
referencia el mismo indice utilizado para el rango). 

IMPORTANTE: La caracteristica de buscar textos se encuentra bajo consideracion 
en este momenta, pero aun no ha sido desarrollada o incluso incluida en la 
especificacion oficial. Para obtener mas informacion sobre esta API, visite nuestro 
sitio web y siga los enlaces correspondientes a este capitulo. 


11.6 Referencia rapida 

La API IndexedDB tiene una infraestructura de bajo nivel. Los metodos y propiedades 
estudiados en este capitulo son solo parte de lo que esta API tiene para ofrecer. Con el 
proposito de simplificar los ejemplos, no seguimos ninguna estructura especifica. Sin 
embargo, esta API, asi como otras, esta organizada en interfaces. Por ejemplo, existe una 
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interface especifica para tratar con la organization de la base de datos, otra para la 
creacion y manipulation de Almacenes de Objetos, etc... Cada interface incluye sus 
propios metodos y propiedades, por lo que ahora vamos a presentar la informacion 
compartida en este capltulo siguiendo esta clasificacion oficial. 

IMPORTANTE: Las descripciones presentadas en esta referenda rapida solo muestran 
los aspectos mas relevantes de cada interface. Para estudiar la especificacion 
completa, visite nuestro sitio web y siga los enlaces correspondientes a este capltulo. 

Interface Environment (IDBEnvironment y IDBFactory) 

La interface Environment, o IDBEnvironment, incluye un atributo IDBFactory. Juntas estas 
interfaces proveen los elementos necesarios para operar con bases de datos: 

indexedDB Este atributo provee un mecanismo para acceder al sistema de base de datos 
indexado. 

open(nombre) Este metodo abre una base de datos con el nombre especificado en su atributo. 

Si no existe una base de datos previa, una nueva es creada con el nombre provisto. 
deleteDatabase(nombre) Este metodo elimina una base de datos con el nombre especificado 
en su atributo. 

Interface Database (IDBDatabase) 

El objeto retornado luego de la apertura o creacion de una base de datos es procesado 
por esta interface. Con este objetivo, la interface provee varios metodos y propiedades: 

version Esta propiedad retorna el valor de la version actual de la base de datos abierta. 
name Esta propiedad retorna el nombre de la base de datos abierta. 
objectStoreNames Esta propiedad retorna un listado de los nombres de los Almacenes de 
Objetos contenidos dentro de la base de datos abierta. 
setVersion(valor) Este metodo establece una nueva version para la base de datos abierta. 

El atributo valor puede ser cualquier cadena de texto que deseemos. 
createObjectStore(nombre, clave, autolncremento) Este metodo crea un nuevo Almacen de 
Objetos para la base de datos abierta. El atributo nombre representa el nombre del 
Almacen de Objetos, clave es un indice comun para todos los objetos almacenados en 
este almacen, y autolncremento es un valor booleano que activa un generador 
automatico de claves. 

deleteObjectStore(nombre) Este metodo elimina un Almacen de Objetos con el nombre 
especificado en su atributo. 

transaction(almacenes, tipo, maximo) Este metodo inicia una transaccion con la base de 
datos. La transaccion puede ser especificada para uno o mas Almacenes de Objetos 
declarados en el atributo almacenes, y puede ser creada para diferentes tipos de 
acceso de acuerdo con el atributo tipo. Puede tambien recibir un atributo maximo en 
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milisegundos para especificar el tiempo maximo permitido que la operacion puede 
tardar en realizarse. Para mayor informacion sobre como configurar una transaction, 
ver Interface Transaction en esta Referenda rapida. 

Interface Object Store (IDBObjectStore) 

Esta interface incluye todos los metodos y propiedades necesarios para manipular objetos 
en un Almacen de Objetos (Object Store). 

name Esta propiedad retorna el nombre del Almacen de Objetos actualmente en uso. 
keyPath Esta propiedad retorna la clave, si existe, del Almacen de Objetos actualmente 
en uso (esta es la clave definida como fndice comun en el momento en el que el 
Almacen de Objetos fue creado). 

IndexNames Esta propiedad retorna una lista de los nombres de los indices creados para 
el Almacen de Objetos actualmente en uso. 

add(objeto) Este metodo agrega un objeto al Almacen de Objetos seleccionado con la 
informacion provista en su atributo. Si un objeto con el mismo fndice ya existe, un 
error es retornado. El metodo puede recibir un par clave/valor o un objeto 
conteniendo varios pares clave/valor como atributo. 
put(objeto) Este metodo agrega un objeto al Almacen de Objetos seleccionado con la 
informacion provista en su atributo. Si un objeto con el mismo indice ya existe, el 
objeto es sobrescrito con la nueva informacion. El metodo puede recibir un par 
clave/valor o un objeto conteniendo varios pares clave/valor como atributo. 
get(clave) Este metodo retorna el objeto con el valor del fndice igual a clave. 
delete(clave) Este metodo elimina el objeto con el valor del fndice igual a clave. 
createlndex(nombre, propiedad, unico) Este metodo crea un nuevo fndice para el Almacen de 
Objetos seleccionado. El atributo nombre especifica el nombre del fndice, el atributo 
propiedad declara la propiedad de los objetos que sera asociada con este fndice, y el 
atributo unico indica si los objetos con un mismo valor de fndice seran permitidos o no. 
index(nombre) Este metodo activa el fndice con el nombre especificado en su atributo. 
deletelndex(nombre) Este metodo elimina el fndice con el nombre especificado en su 
atributo. 

openCursor(rango, direccion) Este metodo crea un cursor para el Almacen de Objetos 
seleccionado. El atributo rango es un objeto range (definido por la Interface Range) para 
determinar cuales objetos son seleccionados. El atributo direccion establece el orden de 
estos objetos. Para mayor informacion sobre como configurar y manipular un cursor, ver la 
Interface Cursors en esta Referencia Rapida. Para mayor informacion sobre como construir 
un rango con el objeto range, ver la Interface Range en esta Referencia Rapida. 

Interface Cursors (IDBCursor) 

Esta interface provee valores de configuracion para especificar el orden de los objetos 
seleccionados desde el Almacen de Objetos. Estos valores deben ser declarados como el 
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segundo atributo del metodo openCursor (), como en openCursor (null, 
IDBCursor.PREV) . 

NEXT (siguiente). Esta constante determina un orden ascendente para los objetos apuntados 
por el cursor (este es el valor por defecto). 

NEXT_NO_DUPLICATE (siguiente no duplicado). Esta constante determina un orden 
ascendente para los objetos apuntados por el cursor e ignora los duplicados. 

PREV (anterior). Esta constante determina un orden descendente para los objetos apuntados 
por el cursor. 

PREV_NO_DUPLICATE (anterior no duplicado). Esta constante determina un orden 
descendente para los objetos apuntados por el cursor e ignora los duplicados. 

Esta interface tambien provee varios metodos y propiedades para manipular los 
objetos apuntados por el cursor. 

continue(clave) Este metodo mueve el puntero del cursor hacia el siguiente objeto en la 
lista o hacia el objeto referenciado por el atributo clave, si es declarado. 
delete() Este metodo elimina el objeto que actualmente se encuentra apuntado por el 
cursor. 

update(valor) Este metodo modifica el objeto actualmente apuntado por el cursor con el 
valor provisto por su atributo. 

key Esta propiedad retorna el valor del indice del objeto actualmente apuntado por el 
cursor. 

value Esta propiedad retorna el valor de cualquier propiedad del objeto actualmente 
apuntado por el cursor. 

direction Esta propiedad retorna el orden de los objetos obtenidos por el cursor (ascendente 
o descendente). 

Interface Transactions (IDBTransaction) 

Esta interface provee valores de configuracion para especificar el tipo de transaccion que 
se va a llevar a cabo. Estos valores deben ser declarados como el segundo atributo del 
metodo transaction (), como en transaction(almacenes, IDBTransaction. 
READWRITE) . 

READ_ONV/ Esta constante configura la transaccion como una transaccion de solo lectura 
(este es el valor por defecto). 

READ_WRITE Esta constante configura la transaccion como una transaccion de lectura- 
escritura. 

VERSION_CHANGE Este tipo de transaccion es usado solamente para actualizar el numero 
de version de la base de datos. 
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Interface Range (IDBKeyRangeConstructors) 

Esta interface provee varios metodos para la construccion de un rango a ser usado con 
cursores: 

only(valor) Este metodo retorna un rango con los puntos de inicio y final iguales a valor. 
bound(bajo, alto, bajoAbierto, altoAbierto) Este metodo retorna un rango con el punto 
de inicio declarado por bajo, el punto final declarado por alto, y si estos valores 
seran excluidos de la lista de objetos o no declarado por los ultimos dos atributos. 
lowerBound(valor, abierto) Este metodo retorna un rango comenzando por valor y 
terminando al final de la lista de objetos. El atributo abierto determina si los objetos 
que concuerdan con valor seran excluidos o no. 
upperBound(valor, abierto) Este metodo retorna un rango comenzando desde el inicio de 
la lista de objetos y terminando en valor. El atributo abierto determina si los 
objetos que concuerdan con valor seran excluidos o no. 

Interface Error (IDBDatabaseException) 

Los errores retornados por las operaciones en la base de datos son informados a traves de 
esta interface. 

code Esta propiedad representa el numero de error. 

message Esta propiedad retorna un mensaje describiendo el error. 

El valor retornado tambien puede ser comparado con las constantes de la siguiente 
lista para encontrar el error correspondiente. 

UNKNOWN_ERR -valor 0. 

NON_TRANSIENT_ERR - valor 1. 

NOT_FOUND_ERR - valor 2. 

CONSTRAINT_ERR - valor 3. 

DATA_ERR - valor 4. 

NOT_ALLOWED_ERR - valor 5. 

TRANSACTION_INACTIVE_ERR - valor 6. 

ABORT_ERR - valor 7. 

READ_ONLY_ERR - valor 11. 

RECOVERABLE_ERR - valor 21. 

TRANSIENT_ERR - valor 31. 

TIMEOUT_ERR-valor 32. 

DEADLOCK_ERR - valor 33. 
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12.1 Almacenamiento de archivos 

Los archivos son unidades de informacion que usuarios pueden facilmente compartir con 
otras personas. Los usuarios no pueden compartir el valor de una variable o un par 
clave/valor como los usados por la API Web Storage, pero ciertamente pueden hacer 
copias de sus archivos y enviarlos por medio de un DVD, memorias portatiles, discos 
duros, transmitirlos a traves de Internet, etc... Los archivos pueden almacenar grandes 
cantidades de datos y ser movidos, duplicados o transmitidos independientemente de la 
naturaleza de su contenido. 

Los archivos fueron siempre una parte esencial de cada aplicacion, pero hasta ahora 
no habia forma posible de trabajar con ellos en la web. Las opciones estaban limitadas a 
subir o descargar archivos ya existentes en servidores u ordenadores de usuarios. No 
existia la posibilidad de crear archivos, copiarlos o procesarlos en la web... hasta hoy. 

La especificacion de HTML5 fue desarrollada considerando cada aspecto necesario 
para la construccion y funcionalidad de aplicaciones web. Desde el diseno hasta la 
estructura elemental de los datos, todo fue cubierto. Y los archivos no podian ser 
ignorados, porsupuesto. Poresta razon, la especificacion incorpora la API File. 

LA API File comparte algunas caracteristicas con las API de almacenamiento estudiadas 
en capitulos previos. Esta API posee una infraestructura de bajo nivel, aunque no tan 
compleja como IndexedDB, y al igual que otras puede trabajar de forma sincrona o 
asincrona. La parte sincrona fue desarrollada para ser usada con la API Web Workers (del 
mismo modo que IndexedDB y otras APIs), y la parte asincrona esta destinada a 
aplicaciones web convencionales. Estas caracteristicas nos obligan nuevamente a cuidar 
cada aspecto del proceso, controlar si la operacion fue exitosa o devolvio errores, y 
probablemente adoptar (o desarrollar nosotros mismos) en el futuro APIs mas simples 
construidas sobre la misma. 

API File es una vieja API que ha sido mejorada y expandida. Al dia de hoy esta compuesta 
por tres especificaciones: API File, API File: Directories & System, y API File: Writer, pero esta 
situacion puede cambiar durante los siguientes meses con la incorporacion de nuevas 
especificaciones o incluso la unification de algunas de las ya existentes. 

Basicamente, la API File nos permite interactuar con archivos locales y procesar su 
contenido en nuestra aplicacion, la extension la API File: Directories & System provee las 
herramientas para trabajar con un pequeno sistema de archivos creado especificamente 
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para cada aplicacion, y la extension API File: Writer es para escribir contenido dentro de 
archivos que fueron creados o descargados por la aplicacion. 


12.2 Procesando archivos de usuario 

Trabajar con archivos locales desde aplicaciones web puede ser peligroso. Los 
navegadores deben considerar medidas de seguridad antes de siquiera contemplar la 
posibilidad de dejar que las aplicaciones tengan acceso a los archivos del usuario. A este 
respecto, File API provee solo dos metodos para cargar archivos desde una aplicacion: la 
etiqueta <input> y la operacion arrastrar y soltar. 

En el Capitulo 8 aprendimos como usar la API Drag and Drop para arrastrar archivos 
desde una aplicacion de escritorio y soltarlos dentro de un espacio en la pagina web. La 
etiqueta <input> (tambien estudiada en capitulos anteriores), cuando es usada con el 
tipo file, trabaja de forma similar a API Drag and Drop. Ambas tecnicas transmiten 
archivos a traves de la propiedad files. Del mismo modo que lo hicimos en ejemplos 
previos, lo unico que debemos hacer es explorar el valor de esta propiedad para obtener 
cada archivo que fue seleccionado o arrastrado. 

IMPORTANTE: Esta API y sus extensiones no trabajan en este momento desde un 
servidor local, y solo Google Chrome y Firefox tienen implementaciones 
disponibles. Algunas de estas implementaciones son tan nuevas que solo trabajan 
en navegadores experimentales como Chromium ( www.chromium.org) o Firefox 
Beta. Para ejecutar los codigos de este capitulo, debera usar las ultimas versiones 
de navegadores disponibles y subir todos los archivos a su servidor. 

Plantilla 

En esta primera parte del capitulo vamos a usar la etiqueta <input> para seleccionar 
archivos, pero usted puede, si lo desea, aprovechar la informacion en el Capitulo 8 para 
integrar estos codigos con API Drag and Drop. 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>File API</title> 

<link rel="stylesheet" href="file.css"> 
<script src="file.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 
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<p>Archivos:<brxinput type="file" name="archivos" 

id="archivos"></p> 

</form> 

</section> 

<section id="cajadatos"> 

No se seleccionaron archivos 
</section> 

:/body> 

:/html> 


Listado 12-1. Plantilla para trabajar con los archivos del usuario. 

El archivo CSS incluye estilos para esta plantilla y otros que vamos a usar mas adelante: 


#cajaformulario{ 
float: left; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 5 0 Opx; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

.directorio{ 

color: #000OFF; 
font-weight: bold; 
cursor: pointer; 

} 


Listado 12-2. Estilos para el formulario y la cajadatos. 

Leyendo archivos 

Para leer archivos en el ordenador de los usuarios tenemos que usar la interface 
FileReader. Esta interface retorna un objeto con varios metodos para obtener el 
contenido de cada archivo: 

readAsText(archivo, codificacion) Para procesar el contenido como texto podemos usar este 
metodo. Un evento load es disparado desde el objeto FileReader cuando el archivo 
es cargado. El contenido es retornado codificado como texto UTF-8 a menos que el 
atributo codificacion sea especificado con un valor diferente. Este metodo intentara 
interpretar cada byte o una secuencia de multiples bytes como caracteres de texto. 
readAsBinaryString(archivo) La informacion es lefda por este metodo como una sucesion 
de enteros en el rango de 0 a 255. Este metodo nos asegura que cada byte es leido 
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como es, sin ningun intento de interpretacion. Es util para procesar contenido binario 
como imagenes o videos. 

readAsDatal)RL(archivo) Este metodo genera una cadena del tipo data:url codificada en 
base64 que representa los datos del archivo. 

readAsArrayBuffer(archivo) Este metodo retorna los datos del archivo como datos del tipo 
ArrayBuffer. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 
var archivos=document.getElementByld('archivos'); 
archivos.addEventListener('change 1 , procesar, false); 

} 

function procesar(e){ 

var archivos=e.target.files; 
var archivo=archivos[0]; 

var lector=new FileReader(); 
lector.onload=mostrar; 
lector.readAsText(archivo); 

} 

function mostrar(e){ 

var resultado=e.target.result; 
caj adatos.innerHTML=resultado; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 12-3. Leyendo un archivo de texto. 

Desde el campo archivos del documento HTML del Listado 12-1 el usuario puede 
seleccionar un archivo para ser procesado. Para detectar esta accion, en la funcion 
iniciar () del Listado 12-3 agregamos una escucha para el evento change. De este 
modo, la funcion procesar () sera ejecutada cada vez que algo cambie en el elemento 
<input> (un nuevo archivo es seleccionado). 

La propiedad files enviada por el elemento <input> (y tambien por la API Drag and 
Drop) es un array conteniendo todos los archivos seleccionados. Cuando el atributo 
multiple no esta presente en la etiqueta <input> no es posible seleccionar multiples 
archivos, por lo que el primer elemento del array sera el unico disponible. Al comienzo de 
la funcion procesar () tomamos el contenido de la propiedad files, lo asignamos a la 
variable archivos y luego seleccionamos el primer archivo con la llnea var 
archivo=archivos[0] . 

IMPORTANTE: Para aprender mas acerca del atributo multiple lea nuevamente el 
Capltulo 6, Listado 6-17. Tambien puede encontrar un ejemplo de como trabajar 
con multiples archivos en el codigo del Listado 8-10, Capltulo 8. 
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Lo primero que debemos hacer para comenzar a procesar el archivo es obtener un 
objeto FileReader usando el constructor FileReader (). En la funcion procesar () 
del Listado 12-3 llamamos a este objeto lector. En el siguiente paso, registramos un 
manejador de eventos onload para el objeto lector con el objetivo de detectar cuando 
el archivo fue cargado y ya podemos comenzar a procesarlo. Finalmente, el metodo 
readAsText 0 lee el archivo y retorna su contenido en formato texto. 

Cuando el metodo readAsText () finaliza la lectura del archivo, el evento load es 
disparado y la funcion mostrar () es llamada. Esta funcion toma el contenido del archivo 
desde la propiedad result del objeto lector y lo muestra en pantalla. 

Este codigo, por supuesto, espera recibir archivos de texto, pero el metodo 
readAsText () toma lo que le enviamos y lo interpreta como texto, incluyendo archivos 
con contenido binario (por ejemplo, imagenes). Si carga archivos con diferente contenido, 
vera caracteres extranos aparecer en pantalla. 

Hagalo usted mismo: Cree archivos con los codigos de los Listados 12-1, 12-2 y 
12-3. Los nombres para los archivos CSS y Javascript fueron declarados en el 
documento HTML como file.css y file, js respectivamente. Abra la plantilla 
en el navegadory use el formulario para seleccionar un archivo en su ordenador. 
Intente con archivos de texto asi como imagenes para ver como los metodos 
utilizados presentan el contenido en pantalla. 

IMPORTANTE: En este momento, API File y cada una de sus especificaciones estan 
siendo implementadas por los fabricantes de navegadores. Los codigos en esta 
capitulo fueron testeados en Google Chrome y Firefox 4+, pero las ultimas versiones 
de Chrome no habfan implementado aun el metodo addEventListener () para 
FileReader y otros objetos. Por esta razon, usamos manejadores de eventos en 
nuestro ejemplo, como onload, cada vez que era necesario para que el codigo 
trabajara correctamente. Por ejemplo, lector.onload=mostrar fue usado en 
lugar de lector.addEventListener('load', mostrar, false). Como 
siempre, le recomendamos probar los codigos en cada navegador disponible para 
encontrar que implementacidn trabaja correctamente con esta API. 

Propiedades de archivos 

En una aplicacion real, informacion como el nombre del archivo, su tamano o tipo sera 
necesaria para informar al usuario sobre los archivos que estan siendo procesados o 
incluso controlar cuales son o no son admitidos. El objeto enviado por el elemento 
<input > incluye varias propiedades para acceder a esta informacion: 

name Esta propiedad retorna el nombre completo del archivo (nombre y extension). 

size Esta propiedad retorna el tamano del archivo en bytes. 

type Esta propiedad retorna el tipo de archivo, especificado en tipos MIME. 
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function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var archivos=document.getElementByld( 1 archivos'); 
archivos.addEventListener('change', procesar, false); 

} 

function procesar(e){ 

var archivos=e.target.files; 
cajadatos.innerHTML=' 1 ; 
var archivo=archivos[0]; 
if('archivo.type.match(/image.*/i)){ 
alert('seleccione una imagen'); 

}else{ 

cajadatos.innerHTML+='Nombre: 1 +archivo.name+'<br> 1 ; 

cajadatos.innerHTML+='Tamano: 1 +archivo.size+ 1 bytes<br>'; 

var lector=new FileReader(); 
lector.onload=mostrar; 
lector.readAsDataURL(archivo); 

} 

} 

function mostrar(e){ 

var resultado=e.target.result; 

cajadatos.innerHTML+='<img src="'+resultado+'">' ; 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-4. Cargando imageries. 

El ejemplo del Listado 12-4 es similar al anterior excepto que esta vez usamos el 
metodo readAsDataURL () para leer el archivo. Este metodo retorna el contenido del 
archivo en el formato data:url que puede ser usado luego como fuente de un elemento 
<img> para mostrar la imagen seleccionada en la pantalla. 

Cuando necesitamos procesar una clase particular de archivo, lo primero que debemos 
hacer es leer la propiedad type del archivo. En la funcion procesar () del Listado 12-4 
controlamos este valor aprovechando el viejo metodo match(). Si el archivo no es una 
imagen, mostramos un mensaje de error con alert (). Si, por otro lado, el archivo es 
efectivamente una imagen, el nombre y tamano del archivo son mostrados en pantalla y el 
archivo es abierto. 

A pesar del uso de readAsDataURL (), el proceso de apertura es exactamente el 
mismo. El objeto FileReader es creado, el manejador onload es registrado y el archivo 
es cargado. Una vez que el proceso termina, la funcion mostrar () usa el contenido de la 
propiedad result como fuente del elemento <img> y la imagen seleccionada es 
mostrada en la pantalla. 

Conceptos basicos: Para construir el filtro aprovechamos Expresiones Regulares y 
el conocido metodo Javascript match(). Este metodo busca por cadenas de 
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texto que concuerden con la expresion regular, retornando un array con todas las 
coincidencias o el valor null en caso de no encontrar ninguna. El tipo MIME para 
imagenes es algo como image/jpeg para imagenes en formato JPG, o 
image/gif para imagenes en formato GIF, por lo que la expresion /image. */i 
aceptara cualquier formato de imagen, pero solo permitira que imagenes y no 
otro tipo de archivos sean lefdos. Para mas informacion sobre Expresiones 
Regulares o tipos MIME, visite nuestro sitio web y siga los enlaces 
correspondientes a este capitulo. 


Blobs 

Ademas de archivos, la API trabaja con otra clase de fuente de datos llamada blobs. Un 
blob es un objeto representando datos en crudo. Fueron creados con el proposito de 
superar limitaciones de Javascript para trabajar con datos binarios. Un blob es 
normalmente generado a partir de un archivo, pero no necesariamente. Es una buena 
alternativa para trabajar con datos sin cargar archivos enteros en memoria, y provee la 
posibilidad de procesar informacion binaria en pequenas piezas. 

Un blob tiene propositos multiples, pero esta enfocado en ofrecer una mejor manera 
de procesar grandes piezas de datos crudos o archivos. Para generar blobs desde otros 
blobs o archivos, la API ofrece el metodo slice (): 

slice(comienzo, largo, tipo) Este metodo retorna un nuevo blob generado desde otro blob 
o un archivo. El primer atributo indica el punto de comienzo, el segundo el largo del 
nuevo blob, y el ultimo es un atributo opcional para especificar el tipo de datos usados. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var archivos=document.getElementByld( 1 archivos'); 
archivos.addEventListener('change 1 , procesar, false); 

} 

function procesar(e){ 

var archivos=e.target.files; 
cajadatos.innerHTML=' 1 ; 
var archivo=archivos [0] ; 
var lector=new FileReaderO; 

lector.onload=function(e){ mostrarfe, archivo); }; 

var blob=archivo.slice(0,1000); 

lector.readAsBinaryString(blob); 

} 

function mostrar(e, archivo){ 
var resultado=e.target.result; 

caj adatos.innerHTML='Nombre: 1 +archivo.name+'<br> 1 ; 

caj adatos.innerHTML+= 1 Tipo: '+archivo.type+ 1 <br>'; 
cajadatos.innerHTML+= 1 Tamano: '+archivo.size+ 1 bytes<br>'; 
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cajadatos.innerHTML+= 1 Tamano Blob: 1 +resultado.length+' 

bytes<br>'; 

caj adatos.innerHTML+= 1 Blob: 1 +resultado; 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-5. Trabajando con blobs. 

IMPORTANTE: Debido a inconsistencias con metodos previos, un reemplazo para 
el metodo slice esta siendo implementado en este momento. Hasta que este 
metodo este disponible, para probar el codigo del Listado 12-5 en las ultimas 
versiones de Firefox y Google Chrome tendra que reemplazar slice por 
mozSlice y webkitslice respectivamente. Para mas informacion, visite 
nuestro sitio web y siga los enlaces correspondientes a este capitulo. 

En el codigo del Listado 12-5, hicimos exactamente lo que vemamos haciendo hasta el 
momento, pero esta vez en lugar de leer el archivo completo creamos un blob con el 
metodo slice (). El blob tiene 1000 bytes de largo y comienza desde el byte 0 del 
archivo. Si el archivo cargado es mas pequeno que 1000 bytes, el blob sera del mismo 
largo del archivo (desde el comienzo hasta el EOF, o End Of File). 

Para mostrar la informacion obtenida por este proceso, registramos el manejador de 
eventos onload y llamamos a la funcion mostrar () desde una funcion anonima con la 
que pasamos la referenda del objeto archivo. Este objeto es recibido por mostrar () y 
sus propiedades son mostradas en la pantalla. 

Las ventajas ofrecidas por blobs son incontables. Podemos crear un bucle para dividir 
un archivo en varios blobs, por ejemplo, y luego procesar esta informacion parte por 
parte, creando programas para subir archivos al servidor o aplicaciones para procesar 
imagenes, entre otras. Los blobs ofrecen nuevas posibilidades a los codigos Javascript. 

Eventos 

El tiempo que toma a un archivo para ser cargado en memoria depende de su tamano. 
Para archivos pequenos, el proceso se asemeja a una operacion instantanea, pero grandes 
archivos pueden tomar varios segundos en cargar. Ademas del evento load ya estudiado, 
la API provee eventos especiales para informar sobre cada instancia del proceso: 

loadstart Este evento es disparado desde el objeto FileReader cuando la carga comienza. 
progress Este evento es disparado periodicamente mientras el archivo o blob esta siendo 
leido. 

abort Este evento es disparado si el proceso es abortado. 
error Este evento es disparado cuando la carga ha fallado. 

loadend Este evento es similar a load, pero es disparado en caso de exito o fracaso. 
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function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var archivos=document.getElementByld( 1 archivos'); 
archivos.addEventListener('change 1 , procesar, false); 

} 

function procesar(e){ 

var archivos=e.target.files; 
cajadatos.innerHTML=' 1 ; 
var archivo=archivos[0]; 
var lector=new FileReaderO; 
lector.onloadstart=comenzar; 
lector.onprogress = estado; 

lector.onloadend=function(){ mostrar(archivo); }; 

lector.readAsBinaryString(archivo); 

} 

function comenzar(e){ 

cajadatos.innerHTML= 1 <progress value="0" max="100">0%</progress>'; 

} 

function estado(e){ 

var por=parseInt(e.loaded/e.total*100); 

cajadatos.innerHTML= 1 <progress value="'+por+ 1 " max="100">' 

+por+ 1 %</progress> 1 ; 

} 

function mostrar(archivo){ 

caj adatos.innerHTML='Nombre: 1 +archivo.name+'<br> 1 ; 

caj adatos.innerHTML+= 1 Tipo: '+archivo.type+'<br>'; 
cajadatos.innerHTML+= 1 Tarnaho: '+archivo.size+ 1 bytes<br>'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-6. Usando eventos para controlar el proceso de lectura. 

Con el codigo del Listado 12-6 creamos una aplicacion que carga un archivo y muestra el 
progreso de la operacion a traves de una barra de progreso. Tres manejadores de eventos 
fueron registrados en el objeto FileReader para controlar el proceso de lectura y dos 
funciones fueron creadas para responder a estos eventos: comenzarO y estadoO. La 
funcion comenzarO iniciara la barra de progreso con el valor 0% y la mostrara en pantalla. 
Esta barra de progreso podria usar cualquier valor o rango, pero decidimos usar porcentajes 
para que sea mas comprensible para el usuario. En la funcion estadoO, este porcentaje es 
calculado a partir de las propiedades loaded y total retornadas por el evento progress. La 
barra de progreso es recreada en la pantalla cada vez que el evento progress es disparado. 

Hagalo usted mismo: Usando la plantilla del Listado 12-1 y el codigo Javascript del 
Listado 12-6, pruebe cargar un archivo extenso (puede intentar con un video, por 
ejemplo) para ver la barra de progreso en funcionamiento. Si el navegador no 
reconoce el elemento <progress>, el contenido de este elemento es mostrado en 
su lugar. 
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IMPORTANTE: En nuestro ejemplo utilizamos innerHTML para agregar un nuevo 
elemento <progress> al documento. Esta no es una practica recomendada pero 
es util y conveniente por razones didacticas. Normalmente los elementos son 
agregados al documento usando el metodo Javascript createElement 0 junto 
con appendChildO . 


12.3 Creando archivos 

La parte principal de API File es util para cargar y procesar archivos ubicados en el 
ordenador del usuario, pero toma archivos que ya existen en el disco duro. No contempla 
la posibilidad de crear nuevos archivos o directories. Una extension de esta API llamada 
API File: Directories & System se hace cargo de esta situacion. La API reserva un espacio 
especifico en el disco duro, un espacio de almacenamiento especial en el cual la aplicacion 
web podra crear y procesar archivos y directories exactamente como una aplicacion de 
escritorio lo haria. El espacio es unico y solo accesible por la aplicacion que lo creo. 

IMPORTANTE: Al momento de escribir estas lineas Google Chrome es el unico 
navegador que ha implementado esta extension de API File, pero no reserva 
espacio de almacenamiento por defecto. Si intentamos ejecutar los siguientes 
codigos un error QUOTA_EXCEEDED (cupo excedido) sera mostrado. Para poder 
usar API File: Directories & System, Chrome debe ser abierto con la siguiente 
bandera: --unlimited-quota-for-files. Para incorporar esta bandera en 
Windows, vaya a su escritorio, haga clic con el boton derecho del raton sobre el 
icono de Google Chrome y seleccione la opcion Propiedades. Dentro de la 
ventana abierta vera un campo llamado Destino con la ruta y el nombre del 
archivo del programa. Al final de esta Ifnea agregue la bandera --unlimited- 
quota-for-files. La ruta obtenida sera similar a la siguiente: 

C:\Usuarios\...\Chrome\Application\chrome.exe --unlimited-quota-for-files 

Plantilla 

Para probar esta parte de la API vamos a necesitar un nuevo formulario con un campo de 
texto y un boton para crear y procesar archivos y directories: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>File API</title> 

clink rel="stylesheet" href="file.css"> 

<script src="file.js"></script> 

</head> 
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<section id="cajaformulario"> 

<form name="formulario"> 

<p>Nombre:<brxinput type="text" name="entrada" 

id="entrada" requiredx/p> 
<pxinput type= "button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay entradas disponibles 
</section> 

:/body> 

:/html> 


Listado 12-7. Nueva plantilla para File API: Directories & System. 

Hagalo listed Mismo: El documento HTML genera un nuevo formulario pero 
preserva la misma estructura y estilos CSS. Solo necesita reemplazar el codigo 
HTML anterior por el del Listado 12-7 y copiar los codigos Javascript dentro del 
archivo file.js para probar los siguientes ejemplos. 

IMPORTANTE: El atributo request fue incluido en el elemento <input>, pero 
no sera considerado en los codigos de este capitulo. Para volver efectivo el 
proceso de validacion, deberemos aplicar API Forms. Lea el codigo del Listado 10- 
5, Capitulo 10, para encontrar un ejemplo sobre como hacerlo. 

El disco duro 

El espacio reservado para la aplicacion es como un espacio aislado, una pequena unidad 
de disco duro con su propio directorio raiz y configuracion. Para comenzar a trabajar con 
esta unidad virtual, primero tenemos que solicitar que un Sistema de Archivos sea 
inicializado para nuestra aplicacion. 

requestFileSystem(tipo, tamano, funcion exito, funcion error) Este metodo crea el Sistema 
de Archivos del tamano y tipo especificados por sus atributos. El valor del atributo tipo 
puede ser temporary (temporario) o persistent (persistente) de acuerdo al tiempo 
que deseamos que los archivos sean preservados. El atributo tamano determina el 
espacio total que sera reservado en el disco duro para este Sistema de Archivos en bytes. 
En caso de error o exito, el metodo llama a las correspondientes funciones. 

El metodo requestFileSystemO retorna un objeto FileSystem con dos propiedades: 

root El valor de esta propiedad es una referenda al directorio raiz del Sistema de Archivos. 
Este es tambien un objeto DirectoryEntry (Entrada de Directorio) y tiene los 
metodos asignados a esta clase de objetos, como veremos mas adelante. Usando esta 
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propiedad podemos referenciar el espacio de almacenamiento y por medio de esta 
referenda trabajar con archivos y directorios. 

name Esta propiedad retorna informacion acerca del Sistema de Archivos, como el nombre 
asignado por el navegador y su condicion. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , crear, false); 

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 

} 

function creardd(sistema) { 
dd=sistema.root; 

} 

function crear(){ 

var nombre=document.getElementByld('entrada 1 ).value; 
if(nombre!=''){ 

dd.getFile(nombre, {create: true, exclusive: false}, mostrar, 

errores); 

} 

} 

function mostrar(entrada){ 

document.getElementByld('entrada').value=''; 

caj adatos.innerHTML='Entrada Creada!<br>'; 
caj adatos.innerHTML+= 1 Nombre: '+entrada.name+ 1 <br> *; 
cajadatos.innerHTML+= 1 Ruta: '+entrada.fullPath+ 1 <br> >; 

cajadatos.innerHTML+= 1 Sistema: '+entrada.filesystem.name; 

} 

function errores(e){ 

alert('Error: '+e.code); 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-8. Creando nuestro propio Sistema de Archivos. 

IMPORTANTE: Google Chrome es el unico navegador en este momento con una 
implementacion funcional de esta parte de File API. Debido a que la implementacion 
es experimental, tuvimos que reemplazar el metodo requestFileSystemO por el 
especffico de Chrome webkitRequestFileSystem (). Usando este metodo, podra 
probar en su navegador los codigos para este y los siguientes ejemplos. Una vez que 
la etapa de experimentation este finalizada podra volver a usar el metodo original. 

Usando el documento HTML del Listado 12-7 y el codigo del Listado 12-8, obtenemos 
nuestra primera aplicacion para trabajar con nuevos archivos en el ordenador del usuario. 
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El codigo llama al metodo requestFileSystemO para crear el Sistema de Archivos (u 
obtener una referenda si el sistema ya existe), y si esta es la primera visita, el Sistema de 
Archivos es creado como permanente, con un tamano de 5 megabytes (5*1024*1024). En 
caso de que esta ultima operacion sea un exito, la funcion crearddO es ejecutada, 
continuando con el proceso de inicializacion. Para controlar errores, usamos la funcion 
errores (), del mismo modo que lo hicimos para otras APIs. 

Cuando el Sistema de Archivos es creado o abierto, la funcion crearddO recibe un 
objeto Filesystem y graba el valor de la propiedad root en la variable dd para 
referenciar el directorio rafz mas adelante. 

Creando archivos 

El proceso de iniciacion del Sistema de Archivos ha sido finalizado. El resto de las funciones en 
el codigo del Listado 12-8 crean un nuevo archivo y muestran los datos de la entrada (un 
archivo o directorio) en la pantalla. Cuando el boton "Aceptar" es presionado en el formulario, 
la funcion crear () es llamada. Esta funcion asigna el texto insertado en el elemento <input> 
a la variable nombrey crea un archivo con ese nombre usandoel metodo getFile 0 . 

Este ultimo metodo es parte de la interface DirectoryEntry incluida en la API. La 
interface provee un total de cuatro metodos para crear y manejar archivos y directorios: 

getFile(ruta, opciones, funcion exito, funcion error) Este metodo crea o abre un archivo. 
El atributo ruta debe incluir el nombre del archivo y la ruta donde el archivo esta 
localizado (desde la raiz de nuestro Sistema de Archivos). Hay dos banderas que 
podemos usar para configurar el comportamiento de este metodo: create y 
exclusive. Ambas reciben valores booleanos. La bandera create (crear) indica si el 
archivo sera creado o no (en caso de que no exista, por supuesto), y la bandera 
exclusive (exclusivo), cuando es declarada como true (verdadero), fuerza al 
metodo getFile () a retornar un error si intentamos crear un archivo que ya existe. 
Este metodo tambien recibe dos funciones para responder en case de exito o error. 
getDirectory(ruta, opciones, funcion exito, funcion error) Este metodo tiene exactamente 
las mismas caracteristicas que el anterior pero es exclusivo para directorios (carpetas). 
createReader() Este metodo retorna un objeto DirectoryReader para leer entradas 
desde un directorio especifico. 

removeRecursivelyO Este es un metodo especifico para eliminar directorios y todo su 
contenido. 

En el codigo del Listado 12-8, el metodo getFile () usa el valor de la variable nombre 
para crear u obtener el archivo. El archivo sera creado si no existe (create: true) o sera 
lefdo en caso contrario (exclusive: false). La funcion crear () tambien controla que 
el valor de la variable nombre no sea una cadena vacia antes de ejecutar getFile (). 

El metodo getFile () usa dos funciones, mostrarf) y errores 0, para responder 
al exito o fracaso de la operacion. La funcion mostrarO recibe un objeto Entry 
(entrada) y muestra el valor de sus propiedades en la pantalla. Este tipo de objetos tiene 
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varios metodos y propiedades asociadas que estudiaremos mas adelante. Por ahora 
hemos aprovechado solo las propiedades name, fullPath y filesystem. 

Creando directories 

El metodo getFileO (espedfico para archivos) y el metodo getDirectory () 
(espedfico para directorios) son exactamente iguales. Para crear un directorio (carpeta) 
en nuestro Sistema de Archivos del ejemplo anterior, solo tenemos que reemplazar el 
nombre getFile () por getDirectory (), como es mostrado en el siguiente codigo: 


function crear(){ 

var nombre=document.getElementByld('entrada 1 ).value; 
if(nombre!=''){ 

dd.getDirectory(nombre, {create: true, exclusive: false}, 

mostrar, errores); 

} 

} 


Listado 12-9. Usando getDirectory () para crear un directorio. 

Ambos metodos son parte del objeto DirectoryEntry llamado root, que estamos 
representando con la variable dd, por lo que siempre deberemos usar esta variable para 
llamar a los metodos y crear archivos y directorios en el Sistema de Archivos de nuestra 
aplicacion. 

Hagalo usted mismo: Use la funcion en el Listado 12-9 para reemplazar la funcion 
crear () del Listado 12-8 y asi crear directorios en lugar de archivos. Suba los 
archivos a su servidor, abra el documento HTML del Listado 12-7 en su navegador 
y cree un directorio usando el formulario en la pantalla. 

Listando archivos 

Como mencionamos antes, el metodo createReader () nos permite acceder a una lista 
de entradas (archivos y directorios) en una ruta especffica. Este metodo retorna un objeto 
DirectoryReader que contiene el metodo readEntries () para leer las entradas 
obtenidas: 

readEntries(funcion exito, funcion error) Este metodo lee el siguiente bloque de entradas 
desde el directorio seleccionado. Cada vez que el metodo es llamado, la funcion 
utilizada para procesar operaciones exitosas retorna un objeto con la lista de entradas 
o el valor null si no se encontro ninguna. 


252 



API File 


El metodo readEntries 0 lee la lista de entradas por bloque. Como consecuencia, 
no existe garantfa alguna de que todas las entradas seran retornadas en una sola llamada. 
Tendremos que llamar al metodo tantas veces como sea necesario hasta que el objeto 
retornado sea un objeto vado. 

Ademas, deberemos hacer otra consideradon antes de escribir nuestro proximo 
codigo. El metodo createReader () retorna un objeto Directory-Reader para un 
directorio espedfico. Para obtener los archivos que queremos, primero tenemos que 
obtener el correspondiente objeto Entry del directorio que queremos leer usando el ya 
conocido metodo getDirectory (): 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , crear, false); 


window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 

} 

function creardd(sistema) { 
dd=sistema.root; 
ruta= 1 '; 
mostrarO ; 

} 

function errores(e){ 

alert('Error: '+e.code); 

} 

function crear(){ 

var nombre=document.getElementByld('entrada 1 ).value; 
if(nombre!= 1 '){ 

nombre=ruta+nombre; 

dd.getFile(nombre, {create: true, exclusive: false}, mostrar, 

errores); 



function mostrarO { 

document.getElementByld('entrada').value=''; 


cajadatos.innerHTML=' 1 ; 

dd.getDirectory(ruta,null,leerdir,errores); 

} 

function leerdir(dir){ 

var lector=dir.createReader(); 
var leer=function(){ 

lector.readEntries(function(archivos){ 
if(archivos.length){ 
listar(archivos); 
leer(); 

} 

}, errores); 
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} 

leer(); 

} 

function listar(archivos){ 

for(var i=0; i<archivos.length; i++) { 

if(archivos [i] .isFile) { 

cajadatos.innerHTML+=archivos[i].name+'<br> 1 ; 

}else if(archivos[i].isDirectory){ 
cajadatos.innerHTML+='<span onclick= 

"cambiardir(\ 11 +archivos[i],name+ 1 \')" 
class="directorio">+'+archivos[i].name+'</spanxbr> 1 ; 

} 

} 

} 

function cambiardir(nuevaruta){ 
ruta=ruta+nuevaruta+'/'; 
mostrar(); 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 12-10. Sistema de Archivos completo. 

Este codigo no reemplazara al Explorador de Archivos de Windows, pero al menos 
provee toda la informacion que necesitamos para entender como construir un Sistema de 
Archivos util y funcional para la web. Vamos a analizarlo parte por parte. 

La funcion iniciar () hace lo mismo que en codigos previos: inicia o crea el Sistema 
de Archivos y llama a la funcion crearddO si tiene exito. Ademas de declarar la variable 
dd para referenciar el directorio raiz de nuestro disco duro virtual, la funcion crearddO 
tambien inicializa la variable ruta con una cadena de texto vacla (representando el 
directorio raiz) y llama a la funcion mostrar () para mostrar la lista de entradas en 
pantalla tan pronto como la aplicacion es cargada. 

La variable ruta sera usada en el resto de la aplicacion para conservar el valor de la 
ruta actual dentro de Sistema de Archivos en la que el usuario esta trabajando. Para 
entender su importancia, puede ver como la funcion crear () fue modificada en el codigo 
del Listado 12-10 para usar este valor y asi crear nuevos archivos en la ruta 
correspondiente (dentro del directorio seleccionado por el usuario). Ahora, cada vez que 
un nuevo nombre de archivo es enviado desde el formulario, la ruta es agregada al 
nombre y el archivo es creado en el directorio actual. 

Como ya explicamos, para mostrar la lista de entradas, debemos primero abrir el 
directorio a ser lefdo. Usando el metodo getDirectory () en la funcion mostrar (), el 
directorio actual (de acuerdo a la variable ruta) es abierto y una referencia a este 
directorio es enviada a la funcion leerdirO si la operacion es exitosa. Esta funcion 
guarda la referencia en la variable dir, crea un nuevo objeto DirectoryReader para el 
directorio actual y obtiene la lista de entradas con el metodo readEntries 0 . 

En leerdir (), funciones anonimas son usadas para mantener el codigo organizado y no 
superpoblar el entorno global. En primer lugar, createReader () crea un objeto 
DirectoryReader para el directorio representado por dir. Luego, una nueva funcion 
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llamada leer() es creada dinamicamente para leer las entradas usando el metodo 
readEntries (). Este metodo lee las entradas por bloque, lo que significa que debemos 
llamarlo varias veces para asegurarnos de que todas las entradas disponibles en el directorio 
son lefdas. La funcion leer () nos ayuda a lograr este proposito. El proceso es el siguiente: al 
final de la funcion leerdirO, la funcion leer() es llamada por primera vez. Dentro de la 
funcion leer () llamamos al metodo readEntries (). Este metodo usa otra funcion anonima 
en caso de exito para recibir el objeto files y procesar su contenido (archivos). Si este 
objeto no esta vacfo, la funcion listarO es llamada para mostrar en pantalla las entradas 
lefdas, y la funcion leerO es ejecutada nuevamente para obtener el siguiente bloque de 
entradas (la funcion se llama a sf misma una y otra vez hasta que ninguna entrada es 
retornada). 

La funcion listarO esta a cargo de imprimir la lista de entradas (archivos y 
directories) en pantalla. Toma el objeto files y comprueba las caracterfsticas de cada 
entrada usando dos propiedades importantes de la interface Entry: isFile e 
isDirectory. Como sus nombres en ingles indican, estas propiedades contienen valores 
booleanos para informar si la entrada es un archivo o un directorio. Luego de que esta 
condicion es controlada, la propiedad name es usada para mostrar informacion en la 
pantalla. 

Existe una diferencia en como nuestra aplicacion mostrara un archivo o un directorio 
en la pantalla. Cuando una entrada es detectada como directorio, es mostrada a traves de 
un elemento <span> con un manejador de eventos onclick que llamara a la funcion 
cambiardirO si el usuario hace clic sobre el mismo. El proposito de esta funcion es 
declarar la nueva ruta actual para apuntar al directorio seleccionado. Recibe el nombre del 
directorio, agrega el directorio al valor de la variable ruta y llama a la funcion mostrar () 
para actualizar la informacion en pantalla (ahora deberfan verse las entradas dentro del 
nuevo directorio seleccionado). Esta caracterfstica nos permite abrir directories y ver su 
contenido con solo un clic del raton, exactamente como una explorador de archivos 
comun y corriente harfa. 

Este ejemplo no contempla la posibilidad de retroceder en la estructura para ver el 
contenido de directories padres. Para hacerlo, debemos aprovechar otro metodo provisto 
por la interface Entry: 

getParent(funcion exito, funcion error) Este metodo retorna un objeto Entry del directorio 
que contiene la entrada seleccionada. Una vez que obtenemos el objeto Entry podemos 
leer sus propiedades para obtener toda la informacion acerca del directorio padre de esa 
entrada en particular. 

Como trabajar con el metodo getParentO es simple: supongamos que una 
estructura de directories como fotos/misvacaciones fue creada y el usuario esta 
listando el contenido de misvacaciones en este momento. Para regresar al directorio 
fotos, podrfamos incluir un enlace en el documento HTML con un manejador de eventos 
onclick que llame a la funcion encargada de modificar la ruta actual para apuntar a esta 
nueva direccion (el directorio fotos). La funcion llamada al hacer clic sobre el enlace 
podrfa ser similar a la siguiente: 
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function volver(){ 

dd.getDirectory(ruta,null,function(dir){ 
dir.getParent(function(padre){ 
ruta=padre.fullPath; 
mostrar(); 

}, errores); 

},errores); 

} 


Listado 12-11. Regresando al directorio padre. 

La funcion volver () en el Listado 12-11 cambia el valor de la variable ruta para 
apuntar al directorio padre del directorio actual. Lo primero que hacemos es obtener una 
referencia del directorio actual usando el metodo getDirectory (). Si la operacion es 
exitosa, una funcion anonima es ejecutada. En esta funcion, el metodo getParent () es 
usado para encontrar el directorio padre del directorio referenciado por dir (el directorio 
actual). Si esta operacion es exitosa, otra funcion anonima es ejecutada para recibir el 
objeto padre y declarar el valor de la ruta actual igual al valor de la propiedad fullPath 
(esta propiedad contiene la ruta completa hacia el directorio padre). La funcion 
mostrar () es llamada al final del proceso para actualizar la informacion en pantalla 
(mostrar las entradas ubicadas en la nueva ruta). 

Por supuesto, esta aplicacion puede ser extremadamente enriquecida y mejorada, 
pero eso es algo que dejamos en sus manos. 

Hagalo Listed Mismo: Agregue la funcion del Listado 12-11 al codigo del Listado 
12-10 y cree un enlace en el documento HTML para llamar a esta funcion (por 
ejemplo, <span onclick= "volver () ">volver</span>). 

Manejando archivos 

Ya mencionamos que la interface Entry incluye un grupo de propiedades y metodos para 
obtener informacion y operar archivos. Muchas de las propiedades disponibles ya fueron 
usadas en previos ejemplos. Ya aprovechamos las propiedades isFile e isDirectory 
para comprobar la clase de entrada, y tambien usamos los valores de name, fullPath y 
filesystem para mostrar informacion sobre la entrada en pantalla. El metodo 
getParent (), estudiado en el ultimo codigo, es tambien parte de esta interface. Sin 
embargo, existen todavia algunos metodos mas que son utiles para realizar operaciones 
comunes sobre archivos y directorios. Usando estos metodos podremos mover, copiar y 
eliminar entradas exactamente como en cualquier aplicacion de escritorio: 

moveTo(directorio, nombre, funcion exito, funcion error) Este metodo mueve una entrada 
a una ubicacion diferente en el Sistema de Archivos. Si el atributo nombre es provisto, el 
nombre de la entrada sera cambiado a este valor. 
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copyTo(directorio, nombre, funcion exito, funcion error) Este metodo genera una copia 
de una entrada en otra ubicacion dentro del Sistema de Archivos. Si el atributo nombre 
es provisto, el nombre de la nueva entrada sera cambiado a este valor. 
remove() Este metodo elimina un archivo o un directorio vacfo (para eliminar un directorio con 
contenido, debemos usar el metodo removeRecursively 0 presentado anteriormente). 

Necesitaremos una nueva plantilla para probar estos metodos. Para simplificar los 
codigos, vamos a crear un formulario con solo dos campos, uno para el origen y otro para 
el destino de cada operacion: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>File API</title> 

clink rel="stylesheet" href="file.css"> 

<script src="file.js"></script> 

</head> 

<body> 

csection id="cajaformulario"> 
cform name="formulario"> 

<p>Origen:<br><input type="text" name="origen" id="origen" 

requiredx/p> 

<p>Destino: cbrxinput type="text" name="destino" 

id="destino" requiredx/p> 
cpxinput type= "button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

csection id="cajadatos"x/section> 
c/body> 
c/html> 


Listado 12-12: nueva plantilla para operar con archivos 


Moviendo 

El metodo moveToO requiere un objeto Entry para el archivo y otro para el directorio en 
donde el archivo sera movido. Por lo tanto, primero tenemos que crear una referencia al 
archivo que vamos a mover usando getFile 0, luego obtenemos la referencia del directorio 
destino con getDirectoryO, yfinalmente aplicarnosmoveTo 0 con esta informacion: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener ( 1 click 1 , modificar, false); 
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window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores) 

} 

function creardd(sistema){ 
dd=sistema.root; 


ruta= 1 '; 
mostrarO ; 

} 

function errores(e){ 

alert('Error: '+e.code); 

} 

function modificar(){ 

var origen=document.getElementByld( 1 origen').value; 
var destino=document .getElementByld('destino') .value; 


dd.getFile(origen,null,function(archivo){ 
dd.getDirectory(destino,null,function(dir){ 

archivo.moveTo(dir,null,exito,errores); 

},errores); 

},errores); 

} 

function exito(){ 

document .getElementByld('origen' ) ,value=' ' ; 
document.getElementByld('destino'),value=''; 
mostrar(); 

} 

function mostrarO { 

cajadatos.innerHTML=''; 

dd.getDirectory(ruta,null,leerdir,errores); 

} 

function leerdir(dir){ 

var lector=dir.createReader(); 
var leer=function(){ 

lector.readEntries(function(archivos){ 
if(archivos.length){ 
listar(archivos); 
leer() ; 

} 

}, errores); 

} 

leer() ; 

} 

function listar(archivos){ 

for(var i=0; i<archivos.length; i++) { 

if(archivos[i].isFile) { 

cajadatos.innerHTML+=archivos[i].name+'<br>'; 

}else if(archivos [i] .isDirectory){ 
cajadatos.innerHTML+='<span onclick= 

"cambiardir(\''+archivos[i],name+'\') 
class="directorio" >+ ' +archivos [i] . name+ ' </spanxbr> ' 
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function cambiardir(nuevaruta){ 
ruta=ruta+nuevaruta+'/'; 
mostrar(); 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 12-13. Moviendo archivos. 

En este ultimo ejemplo, usamos funciones de codigos previos para crear o abrir nuestro 
Sistema de Archivos y mostrar el listado de entradas en pantalla. La unica funcion nueva en el 
Listado 12-13 es modificar (). Esta funcion toma los valores de los campos del formulario 
origen y destino y los utiliza para abrir el archivo original y luego, si la operacion es exitosa, 
abrir el directorio de destino. Si ambas operaciones son exitosas el metodo moveToO es 
aplicado sobre el objeto file y el archivo es movido al directorio representado por dir. Si 
esta ultima operacion es exitosa, la funcion exitoO es llamada para vaciar los campos en el 
formulario y actualizar las entradas en pantalla ejecutando la funcion mostrar (). 

Hagalo usted mismo: Para probar este ejemplo necesita un archivo HTML con la 
plantilla del Listado 12-12, el archivo CSS usado desde el comienzo de este capftulo, 
y un archivo llamado file, js con el codigo del Listado 12-13 (recuerde subir los 
archivos a su servidor). Cree archivos y directories usando codigos previos para 
tener entradas con las que trabajar. Utilice el formulario del ultimo documento 
HTML para insertar los valores del archivo a ser movido (con la ruta completa desde 
la raiz) y el directorio en el cual el archivo sera movido (si el directorio se encuentra 
en la raiz del Sistema de Archivos no necesita usar barras, solo su nombre). 

Copiando 

Por supuesto, la unica diferencia entre el metodo moveToO y el metodo copyToO es 
que el ultimo preserva el archivo original. Para usar el metodo copyToO, solo debemos 
cambiar el nombre del metodo en el codigo del Listado 12-13. La funcion modificar() 
quedara como en el siguiente ejemplo: 


function modificar(){ 

var origen=document.getElementByld( 1 origen').value; 
var destino=document.getElementByld('destino').value; 

dd.getFile(origen,null,function(archivo){ 
dd.getDirectory(destino,null,function(dir){ 

archivo.copyTo(dir,null,exito,errores); 

},errores); 

},errores); 


Listado 12-14. Copiando archivos. 
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Hagalo usted mismo: Reemplace la funcion modificarO del Listado 12-13 con 
esta ultima y abra la plantilla del Listado 12-12 para probar el codigo. Para copiar 
un archivo, debe repetir los pasos usados previamente para moverlo. Inserte la 
ruta del archivo a copiar en el campo origen y la ruta del directorio donde desea 
generar la copia en el campo destino. 

Eliminando 

Eliminar archivos y directorio es incluso mas sencillo que mover y copiar. Todo lo que 
tenemos que hacer es obtener un objeto Entry del archivo o directorio que deseamos 
eliminar y aplicar el metodo remove () a esta referencia: 


function modificarO { 

var origen=document.getElementByld( 1 origen').value; 
var origen=ruta+origen; 

dd.getFile(origen,null,function(entrada){ 

entrada.remove(exito,errores); 

},errores); 

} 


Listado 12-15. Eliminando archivos y directorios. 

El codigo del Listado 12-15 solo utiliza el valor del campo origen del formulario. Este 
valor, junto con el valor de la variable ruta, representara la ruta completa de la entrada 
que queremos eliminar. Usando este valor y el metodo getFileO creamos un objeto 
Entry para la entrada y luego aplicamos el metodo remove (). 

Hagalo usted mismo: Reemplace la funcion modificarO en el codigo del Listado 
12-13 con la nueva del Listado 12-15. Esta vez solo necesita ingresar el valor del 
campo origen para especificar el archivo a ser eliminado. 

Para eliminar un directorio en lugar de un archivo, el objeto Entry debe ser creado 
para ese directorio usando getDirectory (), pero el metodo remove () trabaja 
exactamente igual sobre un tipo de entrada u otro. Sin embargo, debemos considerar una 
situacion con respecto a la eliminacion de directorios: si el directorio no esta vacio, el 
metodo remove () retornara un error. Para eliminar un directorio y su contenido, todo al 
mismo tiempo, debemos usar otro metodo mencionado anteriormente llamado 
removeRecursively(): 


function modificarO { 

var destino=document.getElementByld('destino').value; 
dd.getDirectory(destino,null,function(entrada){ 
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entrada.removeRecursively(exito,errores); 

},errores); 

} 


Listado 12-16. Eliminando directorios no vacios. 

En la funcion del Listado 12-16 usamos el valor del campo destino para indicar el 
directorio a ser eliminado. El metodo removeRecursively () eliminara el directorio y su 
contenido en una sola ejecucion y llamara a la funcion exitoO si la operation es 
realizada con exito. 

Hagalo usted mismo: Las funciones modificar () presentadas en los Listados 12- 
14, 12-15 y 12-16 fueron construidas para reemplazar la misma funcion en el 
Listado 12-13. Para ejecutar estos ejemplos, utilice el codigo del Listado 12-13, 
reemplace la funcion modificar () por la que quiere probar y abra la plantilla del 
Listado 12-12 en su navegador. De acuerdo al metodo elegido, debera ingresar uno 
o dos valores en el formulario. 

IMPORTANTE: Si tiene problemas para ejecutar estos ejemplos, le recomendamos 
usar la ultima version disponible del navegador Chromium (www.chromium.org). Los 
codigos para esta parte de File API fueron tambien probados con exito en Google 
Chrome. 


12.4 Contenido de archivos 

Ademas de la parte principal de API File y la extension ya estudiada, existe otra 
especificacion llamada API File: Writer. Esta extension declara nuevas interfaces para escribir 
y agregar contenido a archivos. Trabaja junto con el resto de la API combinando metodos y 
compartiendo objetos para lograr su objetivo. 

IMPORTANTE: La integration entre todas las especificaciones involucradas en API 
desperto debate acerca de si algunas de las interfaces propuestas deberian ser 
movidas desde una API a otra. Para obtener information actualizada a este 
respecto, visite nuestro sitio web o el sitio de W3C en www.w3.org. 

Escribiendo contenido 

Para escribir contenido dentro de un archivo necesitamos crear un objeto Filewriter. 
Estos objetos son retornados por el metodo createWriter () de la interface FileEntry. 
Esta interface fue adicionada a la interface Entry y provee un total de dos metodos para 
trabajar con archivos: 
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createWriter(funcion exito, funcion error) Este metodo retorna un objeto FileWriter 
asociado con la entrada seleccionada. 

file(funcion exito, funcion error) Este es un metodo que vamos a usar mas adelante para 
leer el contenido del archivo. Crea un objeto File asociado con la entrada seleccionada 
(como el retornado por el elemento <input> o una operation arrastrar y soltar). 

El objeto FileWriter retornado por el metodo createWriter () tiene sus propios 
metodos, propiedades y eventos para facilitar el proceso de agregar contenido a un archivo: 

write(datos) Este es el metodo que escribe contenido dentro del archivo. El contenido a 
ser insertado es provisto por el atributo datos en forma de blob. 
seek(desplazamiento) Este metodo establece la posicion del archivo en la cual el contenido 
sera escrito. El valor del atributo desplazamiento debe ser declarado en bytes. 
truncate(tamano) Este metodo cambia el tamano del archivo de acuerdo al valor del 
atributo tamano (en bytes). 

position Esta propiedad retorna la posicion actual en la cual la siguiente escritura ocurrira. 
La posicion sera 0 para un nuevo archivo o diferente de 0 si algun contenido fue escrito 
dentro del archivo o el metodo seek() fue aplicado previamente. 
length Esta propiedad retorna el largo del archivo. 

writestart Este evento es disparado cuando el proceso de escritura comienza. 
progress Este evento es disparado periodicamente para informar el progreso. 
write Este evento es disparado cuando los datos han sido completamente escritos en el 
archivo. 

abort Este evento es disparado si el proceso es abortado. 
error Este evento es disparado si ocurre un error en el proceso. 
writeend Este evento es disparado cuando el proceso termina. 

Necesitamos crear un objeto mas para preparar el contenido a ser agregado al archivo. El 
constructor BlobBuilder () retorna un objeto BlobBuilder con los siguientes metodos: 

getBlob(tipo) Este metodo retorna el contenido del objeto BlobBuilder como un blob. 

Es util para crear el blob que necesitamos usar con el metodo write (). 
append(datos) Este metodo agrega el valor de datos al objeto BlobBuilder. El atributo 
datos puede ser un blob, un dato del tipo ArrayBuffer o simplemente texto. 

El documento HTML del Listado 12-17 incorpora un segundo campo para insertar texto que 
representara el contenido del archivo. Sera la plantilla utilizada en los proximos ejemplos: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>File API</title> 

<link rel="stylesheet" href="file.css"> 
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<script src="file.js"></script> 

</head> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Archivo: cbrxinput type="text" name="entrada" 

id="entrada" requiredx/p> 
<p>Texto:<brxtextarea name="texto" id="texto" 

requiredx/textareax/p> 
<pxinput type= "button" name="boton" id="boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

No hay informacion disponible 
</section> 

</body> 

</html> 


Listado 12-17. Formulario para ingresar el nombre del archivo y su contenido. 

Para la escritura del contenido abrimos el Sistema de Archivos, obtenemos o creamos el 
archivo con getFile () e insertamos contenido en su interior con los valores ingresados por 
el usuario. Con este fin, crearemos dos nuevas funciones: escribirarchivo () y 
escribircontenido(). 

IMPORTANTE: Hemos intentado mantener los codigos lo mas simples posible por 
propositos didacticos. Sin embargo, usted siempre puede aprovechar funciones 
anonimas para mantener todo dentro del mismo entorno (dentro de la misma 
funcion) o utilizar Programacion Orientada a Objetos para implementaciones mas 
poderosas y escalables. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld( 1 boton'); 
boton.addEventListener( 1 click 1 , escribirarchivo, false); 

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 

} 

function creardd(sistema){ 
dd=sistema.root; 

} 

function errores(e){ 

alert('Error: '+e.code); 

} 

function escribirarchivo(){ 

var nombre=document.getElementByld('entrada').value; 
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dd.getFile(nombre, {create: true, exclusive: 

false},function(entrada){ 

entrada.createWriter(escribircontenido, errores); 

}, errores); 

} 

function escribircontenido(fileWriter) { 

var texto=document.getElementByld('texto').value; 

fileWriter.onwriteend=exito; 

var blob=new WebKitBlobBuilderO; 

blob.append(texto); 

fileWriter.write(blob.getBlob()); 

} 

function exito(){ 

document.getElementByld('entrada').value= 1 '; 
document.getElementByld( 1 texto').value= 1 '; 
caj adatos.innerHTML='Hecho!'; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 12-18. Escribiendo contenido. 

IMPORTANTE: Del mismo modo que el metodo requestFileSystemO, Google 
Chrome ha agregado un prefijo al constructor BlobBuilder () en la 
implementation actual. Deberemos usar WebKitBlobBuilderO en este y los 
siguientes ejemplos para probar nuestros codigos en este navegador. Como 
siempre, el metodo original podra ser utilizado luego de que la etapa experimental 
sea finalizada. 

Cuando el boton "Aceptar" es presionado, la informacion en los campos del formulario 
es procesada por las funciones escribirarchivo () y escribircontenido (). La 
funcion escribirarchivo () toma el valor del campo entrada y usa getFileO para 
abrir o crear el archivo si no existe. El objeto Entry retornado es usado por 
createWriter () para crear un objeto FileWriter. Si la operacion es exitosa, este 
objeto es enviado a la funcion escribircontenido (). 

La funcion escribircontenido () recibe el objeto FileWriter y, usando el valor 
del campo texto, escribe contenido dentro del archivo. El texto debe ser convertido en 
un blob antes de ser usado. Con este proposito, un objeto BlobBuilder es creado con el 
constructor BlobBuilder (), el texto es agregado a este objeto por el metodo append () 
y el contenido es recuperado como un blob usando getBlob (). Ahora la informacion se 
encuentra en el formato apropiado para ser escrita dentro del archivo usando write () . 

Todo el proceso es aslncrono, por supuesto, lo que significa que el estado de la 
operacion sera contantemente informado a traves de eventos. En la funcion 
escribircontenido () , solo escuchamos al evento writeend (usando el manejador de 
eventos onwriteend) para llamar a la funcion exitoO y escribir el mensaje "Hecho!" en 
la pantalla cuando la operacion es finalizada. Sin embargo, usted puede seguir el progreso 
o controlar los errores aprovechando el resto de los eventos disparados por el objeto 
FileWriter. 
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Hagalo usted mismo: Copie la plantilla en el Listado 12-17 dentro de un nuevo 
archivo HTML (esta plantilla usa los mismos estilos CSS del Listado 12-2). Cree un 
archivo Javascript llamado file.js con el codigo del Listado 12-18. Abra el 
documento HTML en su navegador e inserte el nombre y el texto del archivo que 
quiere crear. Si el mensaje "Hecho!" aparece en pantalla, el proceso fue exitoso. 

Agregando contenido 

Debido a que no especificamos la posicion en la cual el contenido debla ser escrito, el 
codigo previo simplemente escribira el blob al comienzo del archivo. Para seleccionar una 
posicion espedfica o agregar contenido al final de un archivo ya existente, es necesario 
usar previamente el metodo seek (). 


function escribircontenido(fileWriter) { 

var texto=document.getElementByld('texto').value; 

fileWriter.seek(fileWriter.length); 

fileWriter.onwriteend=exito; 

var blob=new WebKitBlobBuilder(); 

blob.append(texto)§ 

fileWriter.write(blob.getBlob()); 

} 


Listado 12-19. Agregando contenido al final del archivo. 

La funcion del Listado 12-19 mejora la anterior funcion escribircontenido 0 
incorporando un metodo seek() para mover la posicion de escritura al final del archivo. De 
este modo, el contenido escrito por el metodo write 0 no sobrescribira el contenido anterior. 

Para calcular la posicion del final del archivo en bytes, usamos la propiedad length 
mencionada anteriormente. El resto del codigo es exactamente el mismo que en el Listado 
12-18. 


Hagalo usted mismo: Reemplace la funcion escribircontenido () del Listado 
12-18 por la nueva en el Listado 12-19 y abra el archivo HTML en su navegador. 
Inserte en el formulario el mismo nombre del archivo creado usando el codigo 
previo y el texto que quiere agregar al mismo. 

Leyendo contenido 

Es momenta de leer lo que acabamos de escribir. El proceso de lectura usa tecnicas de la 
parte principal de API File, estudiada al comienzo de este capitulo. Vamos a usar el 
constructor FileReaderO y metodos de lectura como readAsTextO para obtener el 
contenido del archivo. 
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function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , leerarchivo, false); 

window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 

creardd, errores); 

} 

function creardd(sistema){ 
dd=sistema.root; 

} 

function errores (e){ 

alert('Error: '+e.code); 

} 

function leerarchivo(){ 

var nombre=document.getElementByld('entrada 1 ).value; 
dd.getFile(nombre, {create: false}, function(entrada) { 

entrada.file(leercontenido, errores); 

}, errores); 

} 

function leercontenido(archivo){ 

caj adatos.innerHTML='Nombre: 1 +archivo.name+'<br> 1 ; 

caj adatos.innerHTML+= 1 Tipo: '+archivo.type+'<br>'; 
cajadatos.innerHTML+= 1 Tamano: '+archivo.size+' bytes<br>'; 

var lector=new FileReader(); 
lector.onload=exito; 
lector.readAsText(archivo); 

} 

function exito(e){ 

var resultado=e.target.result; 

document.getElementByld('entrada').value=''; 

cajadatos.innerHTML+= 1 Contenido: '+resultado; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 12-20. Leyendo el contenido de un archivo en el Sistema de Archivos. 

Los metodos provistos por la interface FileReader para leer el contenido de un 
archivo, como readAsText (), requieren un blob o un objeto File como atributo. El 
objeto File representa el archivo a ser leldo y es generado por el elemento <input> o 
una operacion arrastrar y soltar. Como dijimos anteriormente, la interface FileEntry 
ofrece la opcion de crear esta clase de objetos utilizando un metodo llamado fileO. 

Cuando el boton "Aceptar" es presionado, la funcion leerarchivo 0 toma el valor 
del campo entrada del formulario y abre el archivo con ese nombre usando getFileO . 
El objeto Entry retornado por este metodo es representado por la variable entrada y 
usado para generar el objeto File con el metodo fileO. 
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Debido a que el objeto File obtenido de este modo es exactamente el mismo 
generado por el elemento <input> o la operacion arrastrar y soltar, todas las mismas 
propiedades usadas antes estan disponibles y podemos mostrar informacion basica acerca 
del archivo incluso antes de que el proceso de lectura del contenido comience. En la 
funcion leercontenido (), los valores de estas propiedades son mostrados en pantalla y 
el contenido del archivo es lefdo. 

El proceso de lectura es una copia exacta del codigo del Listado 12-3: el objeto 
FileReader es creado con el constructor FileReader (), el manejador de eventos 
onload es registrado para llamar a la funcion exitoO cuando el proceso es finalizado, y 
el contenido del archivo es finalmente lefdo por el metodo readAsText (). 

En la funcion exito (), en lugar de imprimir un mensaje como hicimos previamente, el 
contenido del archivo es mostrado en pantalla. Para hacer esto, tomamos el valor de la 
propiedad result perteneciente al objeto FileReader y lo declaramos como contenido 
del elemento cajadatos. 

Hagalo Listed Mismo: El codigo en el Listado 12-20 utiliza solo el valor del campo 
entrada (no necesita escribir un contenido para el archivo, solo ingresar su 
nombre). Abra el archivo HTML con la ultima plantilla en su navegador e inserte 
el nombre del archivo que quiere leer. Debe ser un archivo que usted ya creo 
usando codigos previos o el sistema retornara un mensaje de error (create: 
false). Si el nombre de archivo es correcto, la informacion sobre este archivo y 
su contenido seran mostrados en pantalla. 


12.5 Sistema de archivos de la vida real 

Siempre es bueno estudiar un caso de la vida real que nos permita entender el potencial 
de los conceptos aprendidos. Para finalizar este capftulo, vamos a crear una aplicacion que 
combina varias tecnicas de API File con las posibilidades de manipulacion de imagenes 
ofrecida por API Canvas. 

Este ejemplo toma multiples archivos de imagen y dibuja estas imagenes en el lienzo 
en una posicion seleccionada al azar. Cada cambio efectuado en el lienzo es grabado en un 
archivo para lecturas posteriores, por lo tanto cada vez que acceda a la aplicacion el 
ultimo trabajo realizado sobre el lienzo sera mostrado en pantalla. 

El documento HTML que vamos a crear es similar a la primera plantilla utilizada en este 
capftulo. Sin embargo, esta vez incluimos un elemento <canvas> dentro del elemento 
cajadatos: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>File API</title> 
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<link rel="stylesheet" href="file.css"> 

<script src="file.js"></script> 

</head> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Imagenes:<brxinput type="file" name="archivos" 

id="archivos" multiplex/p> 

</form> 

</section> 

<section id="cajadatos"> 

<canvas id="lienzo" width="500" height="350"x/canvas> 
</section> 

</body> 

</html> 


Listado 12-21. Nueva plantilla con el elemento <canvas>. 

El codigo de este ejemplo incluye metodos y tecnicas de programacion con las que ya 
esta familiarizado, pero la combinacion de especificaciones puede resultar confusa al 
principio. Veamos primero el codigo y analicemos luego cada parte paso a paso: 


function iniciar(){ 

var elemento=document.getElementByld('lienzo'); 
lienzo=elemento.getContext( 1 2d'); 

var archivos=document.getElementByld( 1 archivos'); 
archivos.addEventListener('change', procesar, false); 
window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, 


function creardd(sistema){ 
dd=sistema.root; 
cargarlienzo(); 

} 

function errores(e){ 

alert('Error: '+e.code); 

} 

function procesar(e){ 

var archivos=e.target.files; 
for(var f=0;f<archivos.length;f++){ 
var archivo=archivos [f] ; 
if(archivo.type.match(/image.*/i)){ 
var lector=new FileReaderO; 
lector.onload=mostrar; 
lector.readAsDataURL(archivo); 

} 

} 

} 

function mostrar(e){ 

var resultado=e.target.result; 
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var imagen=new Image(); 
imagen.src=resultado; 

imagen.addEventListener("load", function(){ 
var x=Math.floor(Math.random()*451); 
var y=Math.floor(Math.random()*301); 
lienzo.drawlmage(imagen,x,y,100,100); 
grabarlienzo(); 

}, false); 

} 

function cargarlienzo(){ 

dd.getFile( 1 lienzo.dat', {create: false}, function(entrada) { 
entrada.file(function(archivo){ 
var lector=new FileReaderO; 
lector.onload=function(e){ 
var imagen=new Image(); 
imagen.src=e.target.result; 

imagen.addEventListener("load", function(){ 
lienzo.drawlmage(imagen,0,0); 

}, false); 

} ; 

lector.readAsBinaryString(archivo); 

}, errores); 

}, errores); 

} 

function grabarlienzo(){ 

var elemento=document.getElementByld( 1 lienzo'); 
var info=elemento.toDataURL(); 

dd.getFile('lienzo.dat', {create: true, exclusive: false}, 

function(entrada) { 

entrada.createWriter(function(fileWriter){ 
var blob=new WebKitBlobBuilder(); 
blob.append(info); 
fileWriter.write(blob.getBlob()); 

}, errores); 

}, errores); 

} 

window.addEventListener('load', iniciar, false); 


Listado 12-22. Combinando API Filey API Canvas. 

En este ejemplo trabajamos con dos APIs: API File (con sus extensiones) y API Canvas. 
En la funcion iniciar (), ambas APIs son inicializadas. El contexto para el lienzo es 
generado primero usando getContext (), y el Sistema de Archivos es solicitado despues 
por el metodo requestFileSystemO . 

Como siempre, una vez que el Sistema de Archivos esta listo, la funcion crearddO es 
llamada y la variable dd es inicializada en esta funcion con una referenda al directorio ralz 
del Sistema de Archivos. Esta vez una llamada a una nueva funcion fue agregada al final de 
crearddO con el proposito de cargar el archivo conteniendo la imagen generada por la 
aplicacion la ultima vez que fue ejecutada. 
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Veamos en primer lugar como la imagen grabada en el archivo mencionado es 
construida. Cuando el usuario selecciona un nuevo archivo de imagen desde el formulario, 
el evento change es disparado por el elemento <input> y la funcion procesarO es 
llamada. Esta funcion toma los archivos enviados por el formulario, extrae cada archivo 
del objeto File recibido, controla si se trata de una imagen o no, y en caso positivo lee el 
contenido de cada entrada con el metodo readAsDataURL (), retornando un valor en 
formato data:url. 

Como puede ver, cada archivo es leido por la funcion procesarO, uno a la vez. Cada 
vez que una de estas operaciones es exitosa, el evento load es disparado y la funcion 
mostrarl) es ejecutada. 

La funcion mostrarO toma los datos del objeto lector (recibidos a traves del 
evento), crea un objeto imagen con el constructor image (), y asigna los datos leidos 
previamente como la fuente de esa imagen con la Ifnea imagen. src=resultado. 

Cuando trabajamos con imagenes siempre debemos considerar el tiempo que la 
imagen tarda en ser cargada en memoria. Por esta razon, luego de declarar la nueva 
fuente del objeto imagen agregamos una escucha para el evento load que nos permitira 
procesar la imagen solo cuando fue completamente cargada. Cuando este evento es 
disparado, la funcion anonima declarada para responder al evento en el metodo 
addEventListener () es ejecutada. Esta funcion calcula una posicion al azar para la 
imagen dentro del lienzo y la dibuja usando el metodo drawimageO. La imagen es 
reducida por este metodo a un tamano fijo de 100x100 pixeles, sin importar el tamano 
original (estudie la funcion mostrarO en el Listado 12-22 para entender como funciona 
todo el proceso). 

Luego de que las imagenes seleccionadas son dibujadas, la funcion grabarlienzo () es 
llamada. Esta funcion se encargara de grabar el estado del lienzo cada vez que es 
modificado, permitiendo a la aplicacion recuperar el ultimo trabajo realizado la proxima vez 
que es ejecutada. El metodo de API Canvas llamado toDataURL () es usado para retornar el 
contenido del lienzo como data:url. Para procesar estos datos, varias operaciones son 
realizadas dentro de grabarlienzo 0. Primero, los datos en formato data:url son 
almacenados dentro de la variable info. Luego, el archivo lienzo. dat es creado (si aun no 
existe) o abierto con getFile (). Si esta operacion es exitosa, la entrada es tomada por una 
funcion anonima y el objeto FileWriter es creado por el metodo createWriter (). Si 
esta operacion es exitosa, este metodo tambien llama a una funcion anonima donde el valor 
de la variable info (los datos sobre el estado actual del lienzo) son agregados a un objeto 
BlobBuilder y el blob dentro del mismo es finalmente escrito dentro del archivo 
lienzo.dat por medio de write (). 

IMPORTANTE: En esta oportunidad no escuchamos ningun evento del objeto 
FileWriter porque no hay nada que necesitemos hacer en caso de exito o 
error. Sin embargo, usted siempre puede aprovechar los eventos para reportar el 
estado de la operacion en la pantalla o tener control total sobre cada parte del 
proceso. 
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Bien, es momento de volver a la funcion cargarlienzo (). Como ya mencionamos, 
esta funcion es llamada por la funcion crearddO tan pronto como la aplicacion es cargada. 
Tiene el proposito de leer el archivo con el trabajo anterior y dibujarlo en pantalla. A este 
punto usted ya sabe de que archivo estamos hablando y como es generado, veamos 
entonces como esta funcion restaura el ultimo trabajo realizado sobre el lienzo. 

La funcion cargarlienzo () carga el archivo lienzo.dat para obtener los datos en 
formato data:url generados la ultima vez que el lienzo fue modificado. Si el archivo no 
existe, el metodo getFileO retornara un error, pero cuando es encontrado el metodo 
ejecuta una funcion anonima que tomara la entrada y usara el metodo file() para 
generar un objeto File con estos datos. Este metodo, si es exitoso, tambien ejecuta una 
funcion anonima para leer el archivo y obtener su contenido como datos binarios usando 
readAsBinaryStringO . El contenido obtenido, como ya sabemos, es una cadena de 
texto en formato data:url que debe ser asignado como fuente de una imagen antes de ser 
dibujado en el lienzo. Por este motivo, lo que hacemos dentro de la funcion anonima 
llamada por el evento load una vez que el archivo es completamente cargado, es crear un 
objeto imagen, declarar los datos obtenidos como la fuente de esta imagen, y (cuando la 
imagen es completamente cargada) dibujarla en el lienzo con drawimage (). 

El resultado obtenido por esta pequena pero interesante aplicacion es sencillo: las 
imagenes seleccionadas desde el elemento <input> son dibujadas en el lienzo en una 
posicion al azar y el estado del lienzo es preservado en un archivo. Si el navegador es 
cerrado, no importa por cuanto tiempo, la prbxima vez que la aplicacion es usada el 
archivo es leido, el estado previo del lienzo es restaurado y nuestro ultimo trabajo sigue 
ahi, como si nunca lo hubiesemos abandonado. No es realmente un ejemplo util, pero se 
puede apreciar su potencial. 

Hagalo Usted Mismo: Usando la API Drag and Drop puede arrastrar y soltar archivos 
de imagen dentro del lienzo en lugar de cargar las imagenes desde el elemento 
<input>. Intente combinar el codigo del Listado 12-22 con algunos codigos del 
Capitulo 8 para integrar estas APIs. 


12.6 Referencia rapida 

Del mismo modo que la API IndexedDB, las caracterfsticas de API File y sus extensiones 
fueron organizadas en interfaces. Cada interface provee metodos, propiedades y eventos 
que trabajan combinados con el resto para ofrecer diferentes alternativas con las que 
crear, leer y procesar archivos. En esta referencia rapida vamos a presentar todas las 
caracterfsticas estudiadas en este capitulo en un orden acorde a esta organizacion oficial. 

IMPORTANTE: Las descripciones presentadas en esta referencia rapida solo 
muestran los aspectos mas relevantes de cada interface. Para estudiar la 
especificacion completa, visite nuestro sitio web y siga los enlaces correspondientes 
a este capitulo. 
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Interface Blob (API File) 

Esta interface provee propiedades y metodos para operar con blobs. Es heredada por la 
interface File. 

size Esta propiedad retorna el tamano del blob o el archivo en bytes, 
type Esta propiedad retorna el tipo de medio dentro de un blob o archivo. 
slice(comienzo, largo, tipo) Este metodo retorna la parte del blob o archivo indicada por 
los valores en bytes de los atributos comienzo y largo. 

Interface File (API File) 

Esta interface es una extension de la interface Blob para procesar archivos. 
name Esta propiedad retorna el nombre del archivo. 

Interface FileReader (API File) 

Esta interface provee metodos, propiedades y eventos para cargar blobs y archivos en 
memoria. 

readAsArrayBuffer(archivo) Este metodo retorna el contenido de blobs o archivos en el 
formato ArrayBuffer. 

readAsBinaryString(archivo) Este metodo retorna el contenido de blobs o archivos como 
una cadena binaria. 

readAsText(archivo) Este metodo interpreta el contenido de blobs o archivos y lo retorna 
en formato texto. 

readAsDatal)RL(archivo) Este metodo retorna el contenido de blobs o archivos en el 
formato data:url. 

abort() Este metodo aborta el proceso de lectura. 

result Esta propiedad representa los datos retornados por los metodos de lectura. 
loadstart Este evento es disparado cuando la lectura comienza. 

progress Este evento es disparado periodicamente para reportar el estado del proceso de 
lectura. 

load Este evento es disparado cuando el proceso de lectura es finalizado. 
abort Este evento es disparado cuando el proceso de lectura es abortado. 
error Este evento es disparado cuando un error ocurre en el proceso. 
loadend Este evento es disparado cuando la carga del archivo es finalizada, haya sido el 
proceso exitoso o no. 

Interface LocalFileSystem (API File: Directories and System) 

Esta interface es provista para iniciar un Sistema de Archivos para la aplicacion. 
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requestFileSystem(tipo, tamano, funcion exito, funcion error) Este metodo solicita la 
inicializacion de un Sistema de Archivos configurado de acuerdo a los valores de sus 
atributos. El atributo tipo puede recibir dos valores diferentes: temporary (temporario) o 
persistent (persistente). El tamano debe ser especificado en bytes. 

Interface FileSystem (API File: Directories and System) 

Esta interface provee informacion acerca del Sistema de Archivos. 

name Esta propiedad retorna el nombre del Sistema de Archivos. 

root Esta propiedad retorna una referencia el directorio raiz del Sistema de Archivos. 

Interface Entry (API File: Directories and System) 

Esta interface provee metodos y propiedades para procesar entradas (archivos y directorios) 
en el Sistema de Archivos. 

isFile Esta propiedad es un valor booleano que indica si la entrada es un archivo o no. 
isDirectory Esta propiedad es un valor booleano que indica si la entrada es un directorio o no. 
name Esta propiedad retorna el nombre de la entrada. 

fullPath Esta propiedad retorna la ruta completa de la entrada desde el directorio raiz del 
Sistema de Archivos. 

filesystem Esta propiedad contiene una referencia al Sistema de Archivos. 
moveTo(directorio, nombre, funcion exito, funcion error) Este metodo mueve una entrada a 
una ubicacion diferente dentro del Sistema de Archivos. El atributo directorio 
representa el directorio dentro del cual la entrada sera movida. El atributo nombre, si es 
especificado, cambia el nombre de la entrada en la nueva ubicacion. 
copyTo(directorio, nombre, funcion exito, funcion error) Este metodo genera una copia 
de la entrada dentro del Sistema de Archivos. El atributo directorio representa el 
directorio dentro del cual la copia de la entrada sera creada. El atributo nombre, si es 
especificado, cambia el nombre de la copia. 
remove(funcion exito, funcion error) Este metodo elimina un archivo o un directorio vacio. 
getParent(funcion exito, funcion error) Este metodo retorna el objeto DirectoryEntry 
padre de la entrada seleccionada. 

Interface DirectoryEntry (API File: Directories and System) 

Esta interface provee metodos para crear y leer archivos y directorios. 

createReader() Este metodo crear un objeto DirectoryReader para leer entradas. 
getFile(ruta, opciones, funcion exito, funcion error) Este metodo crea o lee el archivo 
indicado por el atributo ruta. El atributo opciones es declarado por dos banderas: 
create (crear) y exclusive (exclusivo). La primera indica si el archivo sera creado o 
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no, y la segunda, cuando es declarada como true (verdadero), fuerza al metodo a 
retornar un error si el archivo ya existe. 

getDirectory(ruta, opciones, funcion exito, funcion error) Este metodo crea o lee el 
directorio indicado por el atributo ruta. El atributo opciones es declarado por dos 
banderas: create (crear) y exclusive (exclusivo). La primera indica si el directorio 
sera creado o no, y la segunda, cuando es declarada como true (verdadero), fuerza al 
metodo a retornar un error si el directorio ya existe. 
removeRecursively(funcion exito, funcion error) Este metodo elimina un directorio y todo 
su contenido. 

Interface DirectoryReader (API File: Directories and System) 

Esta interface ofrece la posibilidad de obtener una lista de entradas en un directorio 
especifico. 

readEntries(funcion exito, funcion error) Este metodo lee un bloque de entradas desde el 
directorio seleccionado. Retorna el valor null si no se encuentran mas entradas. 

Interface FileEntry (API File: Directories and System) 

Esta interface provee metodos para obtener un objeto File para un archivo especifico y 
un objeto Filewriter para poder agregar contenido al mismo. 

createWriter(funcion exito, funcion error) Este metodo crea un objeto FileWriter para 
escribir contenido dentro de un archivo. 

file(funcion exito, funcion error) Este metodo retorna un objeto File que representa el 
archivo seleccionado. 

Interface BlobBuilder (API File: Writer) 

Esta interface provee metodos para trabajar con objetos blob. 

getBlob(tipo) Este metodo retorna el contenido de un objeto blob como un blob. 
append(datos) Este metodo agrega datos a un objeto blob. La interface provee tres metodos 
append () diferentes para agregar datos en forma de texto, blob, o como un ArrayBuffer. 

Interface FileWriter (API File: Writer) 

La interface FileWriter es una expansion de la interface FileSaver. La ultima no es descripta 
aqui, pero los eventos listados debajo son parte de ella. 

position Este propiedad retorna la posicion actual en la cual se realizara la siguiente 
escritura. 
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length Esta propiedad retorna el largo del archivo en bytes. 
write(blob) Este metodo escribe contenido en un archivo. 

seek(desplazamiento) Este metodo especifica una nueva posicion en la cual se realizara la 
siguiente escritura. 

truncate(tamano) Este metodo cambia el largo del archivo al valor del atributo tamano 
(en bytes). 

writestart Este evento es disparado cuando la escritura comienza. 
progress Este evento es disparado periodicamente para informar sobre el estado del 
proceso de escritura. 

write Este evento es disparado cuando el proceso de escritura es finalizado. 
abort ste evento es disparado cuando el proceso de escritura es abortado. 
error Este evento es disparado si ocurre un error en el proceso de escritura. 
writeend Este evento es disparado cuando la solicitud es finalizada, haya sido exitosa o no. 

Interface FileError (API File y extensiones) 

Varios metodos en esta API retornan un valor a traves de una funcion para indicar errores 
en el proceso. Este valor puede ser comparado con la siguiente lista para encontrar el 
error correspondiente: 

NOT_FOUND_ERR - valor 1. 

SECURITY_ERR - valor 2. 

ABORT_ERR - valor 3. 

NOT_READABLE_ERR - valor 4. 

ENCODING_ERR - valor 5 
NO_MODIFICATION_ALLOWED_ERR - valor 6. 

INVALID_STATE_ERR - valor 7. 

SYNTAX_ERR - valor 8. 

INVALID_MODIFICATION_ERR - valor 9. 

QUOTA_EXCEEDED_ERR - valor 10. 

TYPE_MISMATCH_ERR - valor 11. 

PATH_EXISTS_ERR - valor 12. 
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13.1 Ajax nivel 2 

Esta es la primera parte de lo que llamamos API Communication. Lo que extra oficialmente 
es conocido como API Communication es en realidad un grupo de APIs compuesto por 
XMLHttpRequest Level 2, Cross Document Messaging (API Web Messaging), y Web 
Sockets (API WebSocket). La primera de estas tres tecnologias de comunicacion es una 
mejora del viejo objeto XMLHttpRequest usado extensamente hasta estos dias para 
comunicarse con servidores y construir aplicaciones Ajax. 

El nivel 2 de XMLHttpRequest incorpora nuevas caracteristicas como comunicacion con 
multiples origenes y eventos para controlar la evolucion de las solicitudes. Estas mejoras 
simplifican codigos y ofrecen nuevas opciones, como interactuar con diferentes servidores 
desde la misma aplicacion o trabajar con pequenas trozos de datos en lugar de archivos 
enteros, por nombrar unas pocas. 

El elemento mas importante de esta API es, por supuesto, el objeto XMLHttpRequest. 
Un constructor fue especificado para crearlo: 

XMLHttpRequest() Este constructor retorna un objeto XMLHttpRequest por medio del cual 
podemos comenzar una solicitud y escuchar eventos para controlar el proceso de 
comunicacion. 

El objeto creado por XMLHttpRequest () cuenta con importantes metodos para iniciar y 
controlar la solicitud: 

open(metodo, url, asmcrono) Este metodo configura una solicitud pendiente. El atributo 
metodo declara el tipo de metodo HTTP usado para abrir la conexion (get o post). El 
atributo url declara la ubicacion del codigo que va a procesar la solicitud. Y 
aslncrono es un valor booleano para declarar si la conexion sera sincrona (false) o 
asincrona (true). De ser necesario, el metodo tambien puede incluir valores 
especificando el nombre de usuario y la clave. 
send(datos) Este es el metodo que inicia la solicitud. Existen varias versiones de este metodo 
en un objeto XMLHttpRequest para procesar diferentes tipos de datos. El atributo datos 
puede ser omitido, declarado como un ArrayBuffer, un blob, un documento, una cadena de 
texto, o como FormData (ya estudiaremos este nuevo tipo de datos mas adelante). 
abort() Este metodo cancela la solicitud. 


277 



El gran libro de HTML5, CSS3 y Javascript 


Obteniendo datos 

Comencemos construyendo un ejemplo que obtiene el contenido de un archivo de texto 
en el servidor usando el metodo get. Vamos a necesitar un nuevo documento HTML con 
un boton para iniciar la solicitud: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Ajax Level 2</title> 

<link rel="stylesheet" href="ajax.css"> 

<script src="ajax.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<pxinput type= "button" name= "boton" id= "boton" 

value="Aceptar"x/p> 

</form> 

</section> 

<section id="cajadatos"></section> 

</body> 

</html> 


Listado 13-1. Plantilla para solicitudes Ajax. 

Para hacer los codigos tan simples como sea posible mantuvimos la misma estructura 
HTML usada previamente y aplicamos solo los siguientes estilos por propositos visuales: 


#cajaformulario{ 
float: left; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 5 0 Opx; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 


Listado 13-2. Estilos para dar forma a las cajas en pantalla. 

Hagalo usted mismo: Necesita crear un archivo HTML con la plantilla del Listado 
13-1 y un archivo CSS llamado ajax.css con las reglasdel Listado 13-2. Para poder 
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probar estos ejemplos, debera subir los archivos a su servidor, incluyendo el 
archivo Javascript y el que recibe la solicitud. Vamos a proveer mas instrucciones en 
cada ejemplo. 

El codigo para este primer ejemplo leera un archivo en el servidor y mostrara su 
contenido en pantalla. Ningun dato es enviado al servidor; solo tenemos que hacer una 
solicitud get y mostrar la informacion obtenida en respuesta: 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 

var boton=document.getElementByld('boton'); 
boton.addEventListener('click', leer, false); 

} 

function leer(){ 

var url="texto.txt"; 

var solicitud=new XMLHttpRequest(); 
solicitud.addEventListener('load',mostrar,false); 
solicitud.open("GET", url, true); 
solicitud.send(null); 

} 

function mostrar(e){ 

caj adatos.innerHTML=e.target.responseText; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 13-3. Leyendo un archivo en el servidor. 

En el codigo del Listado 13-3 incluimos nuestra tipica funcion iniciar (). Esta funcion 
es llamada cuando el documento es cargado. Lo que hace en este caso es simplemente 
crear una referenda al elemento caj adatos y agrega una escucha para el evento click 
en el boton del formulario. 

Cuando el boton "Aceptar" es presionado, la funcion leer() es ejecutada. Aquf 
podemos ver en accion todos los metodos estudiados previamente. Primero, la URL del 
archivo que sera leido es declarada. No explicamos todavia como hacer solicitudes a 
diferentes servidores, por lo que este archivo debera estar ubicado en el mismo dominio 
que el codigo Javascript (y en este ejemplo, tambien en el mismo directorio). En el 
siguiente paso, el objeto es creado por el constructor XMLHttpRequest () y asignado a la 
variable solicitud. Esta variable es usada luego para agregar una escucha para el 
evento load e iniciar la solicitud usando los metodos open!) y send(). Debido a que 
ningun dato sera enviado en esta solicitud, un valor null fue declarado en el metodo 
send(). En el metodo open(), en cambio, declaramos la solicitud como del tipo get, la 
URL del archivo a ser leido, y el tipo de operacion (true para asincrona). 

Una operacion asincrona significa que el navegador continuara procesando el resto del 
codigo mientras espera que el archivo termine de ser descargado desde el servidor. El final 
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de la operacion sera informado a traves del metodo load. Cuando este evento es 
disparado, la funcion mostrarO es llamada. Esta funcion reemplaza el contenido del 
elemento cajadatos por el valor de la propiedad responseText, y el proceso finaliza. 

Hagalo usted mismo: Para probar este ejemplo, cree un archivo de texto llamado 
texto.txt y agregue algun texto al mismo. Suba este archivo y el resto de los 
archivos creados con los codigos 13-1, 13-2 y 13-3 a su servidor y abra el 
documento HTML en su navegador. Luego de hacer clic sobre el boton "Aceptar", 
el contenido del archivo de texto es mostrado en pantalla. 

IMPORTANTE: Cuando la respuesta es procesada usando innerHTML, los codigos 
HTML y Javascript son procesados. Por razones de seguridad siempre es mejor 
usar innerText en su lugar. Usted debera tomar la decision de utilizar uno u 
otro de acuerdo a las caracteristicas de su aplicacion. 

Propiedades response 

Existen tres tipos diferentes de propiedades response que podemos usar para obtener la 
informacion retornada por la solicitud: 

response Esta es una propiedad de proposito general. Retorna la respuesta de la solicitud 
de acuerdo al valor del atributo responseType. 
responseText Esta propiedad retorna la respuesta a la solicitud en formato texto. 
responseXML Esta propiedad retorna la respuesta a la solicitud como si fuera un documento 
XML. 

Eventos 

Ademas de load, la especificacion incluye otros eventos para el objeto XMLHttpRequest: 

loadstart Este evento es disparado cuando la solicitud comienza. 

progress Este evento es disparado periodicamente mientras se envian o descargan datos. 

abort Este evento es disparado cuando la solicitud es abortada. 

error Este evento es disparado cuando un error ocurre durante el procesamiento de la 
solicitud. 

load Este evento es disparado cuando la solicitud ha sido completada. 
timeout Si un valor para timeout ha sido especificado, este evento sera disparado 
cuando la solicitud no pueda ser completada en el periodo de tiempo determinado. 
loadend Este evento es disparado cuando la solicitud ha sido completada (sin considerar si 
el proceso fue exitoso o no). 

Quizas el evento mas atractivo de todos sea progress. Este evento es disparado 
aproximadamente cada 50 milisegundos para informar acerca del estado de la solicitud. 
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Gracias a este evento podemos informar al usuario sobre cada paso del proceso y crear 
aplicaciones de comunicacion profesionales. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 

var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , leer, false); 

} 

function leer(){ 

var url="trailer.ogg"; 

var solicitud=new XMLHttpRequest(); 

solicitud.addEventListener('loadstart 1 ,comenzar,false); 
solicitud.addEventListener('progress 1 ,estado,false); 
solicitud.addEventListener('load'.mostrar,false); 

solicitud.open("GET", url, true); 
solicitud.send(null); 

} 

function comenzar(){ 

cajadatos.innerHTML= 1 <progress value="0" max="100">0%</progress>'; 

} 

function estado(e){ 

if(e.lengthComputable){ 

var por=parseInt(e.loaded/e.total*100); 
var barraprogreso=cajadatos.querySelector("progress"); 
barraprogreso.value=por; 
barraprogreso.innerHTML=por+'% 1 ; 

} 

} 

function mostrar(e){ 

caj adatos.innerHTML='Terminado'; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 13-4. Informando el progreso de la solicitud. 

En el Listado 13-4, el codigo usa tres eventos, loadstart, progress y load, para 
controlar la solicitud. El evento loadstart llama a la funcion comenzar () y la barra de 
progreso es mostrada en la pantalla por primera vez. Mientras el archivo es descargado, el 
evento progress ejecutara la funcion estado () constantemente. Esta funcion informa 
sobre el progreso de la operacion a traves del elemento <progress> creado 
anteriormente y el valor de las propiedades ofrecidas por el evento. 

Finalmente, cuando el archivo es completamente descargado, el evento load es 
disparado y la funcion mostrar () imprime el texto "Terminado" en la pantalla. 

IMPORTANTE: En nuestro ejemplo utilizamos innerHTML para agregar un nuevo 
elemento <progress> al documento. Esta no es una practica recomendada pero 
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es util y conveniente por razones didacticas. Normalmente los elementos son 
agregados al documento usando el metodo Javascript createElement () junto 
con appendChild(). 

El evento progress es declarado por la especificacion en la interface 
ProgressEvent. Esta interface es comun a cada API e incluye tres valiosas propiedades 
para retornar informacion sobre el proceso que es monitoreado por el evento: 

lengthComputable Esta propiedad retorna true (verdadero) cuando el progreso puede 
ser calculado o false (falso) en caso contrario. Lo usamos en nuestro ejemplo para 
estar seguros de que los valores de las propiedades restantes son reales y validos. 
loaded Esta propiedad retorna el total de bytes ya subidos o descargados. 
total Este propiedad retorna el tamano total de los datos que estan siendo subidos o 
descargados. 

IMPORTANTE: Dependiendo de su conexion a Internet, para ver como la barra de 
progreso trabaja, es posible que deba usar archivos extensos. En el codigo del 
Listado 13-4, declaramos la URL como el nombre del video usado en el Capltulo 5 
para trabajar con la API de medios. Puede usar sus propios archivos o descargar 
este video en: www.minkbooks.com/content/trailer.ogg. 

Enviando datos 

Hasta el momenta hemos leldo informacion desde el servidor, pero no hemos enviado 
ningun data o incluso usado otro metodo HTTP ademas de get. En el siguiente ejemplo 
vamos a trabajar con el metodo post y un nuevo objeto que nos permite enviar 
informacion usando formularios virtuales. 

En el ejemplo anterior no mencionamos como enviar datos con el metodo get porque, 
como siempre, es tan simple como agregar los valores a la URL. Solo tenemos que crear 
una ruta para la variable url como textfile.txt?vall=l&val2=2 y los valores 
especificados seran enviados junto con la consulta. Los atributos vail y vai 2 de este 
ejemplo seran lefdos como variables get del lado del servidor. Por supuesto, un archivo 
de texto no puede procesar esta informacion, por lo que normalmente deberemos recibir 
los datos usando un archivo programado en PHP, o en cualquier otro lenguaje de 
procesamiento en el servidor. Las solicitudes post, por otro lado, no son tan simples. 

Como ya seguramente conoce, una solicitud post incluye toda la informacion enviada 
por un metodo get pero tambien el cuerpo del mensaje. El cuerpo del mensaje 
representa cualquier informacion de cualquier tipo y tamano a ser enviada. Un formulario 
HTML es normalmente la mejor manera de proveer esta informacion, pero para 
aplicaciones dinamicas esta no es probablemente la mejor opcion o la mas apropiada. 
Para resolver este problema, la API incluye la interface FormData. Esta interface sencilla 
tiene solo un constructor y un metodo con el que obtener y trabajar sobre objetos 
FormData. 
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FormData() Este constructor retorna una objeto FormData usado luego por el metodo 
sendO para enviar informacion. 

append(nombre, valor) Este metodo agrega datos al objeto FormData. Toma un par 
clave/valor como atributos. El atributo valor puede ser una cadena de texto o un blob. 
Los datos retornados representan un campo de formulario. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 

var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

} 

function enviar(){ 

var datos=new FormData(); 
datos.append( 1 nombre 1 , 1 Juan'); 
datos.append( 1 apellido 1 , 1 Perez 1 ); 

var url="procesar.php"; 

var solicitud=new XMLHttpRequest(); 

solicitud.addEventListener( 1 load', mostrar, false); 
solicitud.open("POST", url, true); 
solicitud.send(datos); 

} 

function mostrar(e){ 

caj adatos.innerHTML=e.target.responseText; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 13-5. Enviando un formulario virtual. 

Cuando la informacion es enviada al servidor, es con el proposito de procesarla y 
producir un resultado. Normalmente este resultado es almacenado en el servidor y 
algunos datos son retornados como respuesta al usuario. En el ejemplo del Listado 13-5, 
los datos son enviados al archivo procesar.php y la respuesta de este codigo es 
mostrada en pantalla. 

Para probar este ejemplo, el archivo procesar.php debera imprimir los valores 
recibidos con un codigo similar al siguiente: 


:?PHP 

print(5Su nombre es: 1 .$_POST[ 1 nombre'].'<br> 1 ); 

print('Su apellido es: '.$_POST['apellido']); 


Listado 13-6. Respuesta simple a una solicitud post [procesar. php,). 
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Veamos en primer lugar como la informacion fue preparada para ser enviada. En la 
funcion send() del Listado 13-5, el constructor FormDataO es invocado y el objeto 
FormData retornado es almacenado en la variable datos. Dos pares clave/valor son 
agregados luego a este objeto con los nombres nombre y apellido usando el metodo 
append 0 . Estos valores representaran campos de formulario. 

La inicializacion de la solicitud es exactamente la misma que en codigos previos, 
excepto que esta vez el primer atributo del metodo open () es post en lugar de get, y el 
atributo del metodo sendf) es el objeto datos que acabamos de construiry no un valor 
nulo (null), como usamos anteriormente. 

Cuando el boton "Aceptar" es presionado, la funcion sendO es llamada y el 
formulario creado dentro del objeto FormData es enviado al servidor. El archivo 
procesar.php recibe estos datos (nombre y apellido) y retorna un texto al navegador 
incluyendo esta informacion. La funcion mostrarf) es ejecutada cuando el proceso es 
finalizado. La informacion recibida es mostrada en pantalla desde esta funcion a traves de 
la propiedad responseText. 

Hagalo usted mismo: Este ejemplo requiere que varios archivos sean subidos al 
servidor. Vamos a utilizar el mismo documento HTML y estilos CSS de los Listados 
13-1 y 13-2. El codigo Javascript en el Listado 13-5 reemplaza al anterior. Tambien 
debe crear un nuevo archivo llamado procesar.php con el codigo del Listado 
13-6. Suba todos estos archivos al servidor y abra el documento HTML en su 
navegador. Haciendo clic en el boton "Aceptar", deberfa ver en pantalla el texto 
retornado por procesar.php. 

Solicitudes de diferente origen 

Hasta ahora hemos trabajado con codigos y archivos de datos ubicados en el mismo 
directorio y en el mismo dominio, pero XMLHttpRequest Level 2 nos deja hacer solicitudes 
a diferentes origenes, lo que significa que podremos interactuar con diferentes servidores 
desde la misma aplicacion. 

El acceso de un origen a otro debe ser autorizado en el servidor. La autorizacion se 
realiza declarando los origenes que tienen permiso para acceder a la aplicacion. Esto es 
hecho en la cabecera enviada por el servidor que aloja el archivo que procesa la solicitud. 

Por ejemplo, si nuestra aplicacion esta ubicada en www.dominiol.com y desde ella 
accedemos al archivo procesar.php ubicado en www.dominio2.com, el segundo 
servidor debe ser configurado para declarar al origen www.dominiol.com como un origen 
valido para una solicitud XMLHttpRequest. 

Podemos especificar esta configuracion desde los archivos de configuracion del 
servidor, o declararlo en la cabecera desde el codigo. En el segundo caso, la solucion para 
nuestro ejemplo seria tan simple como agregar la cabecera Access-Control-Allow- 
Origin al codigo del archivo procesar.php: 
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:?PHP 

header('Access-Control-Allow-Origin: * 1 ); 

print('Su nombre es: 1 .$_POST[ 1 nombre']. 1 <br> 1 ); 

print('Su apellido es: '.$_POST['apellido 1 ]); 


Listado 13-7. Autorizando solicitudes de origenes multiples. 

El valor * para la cabecera Access-Control-Allow-Origin representa origenes 
multiples. El codigo del Listado 13-7 podra ser accedido desde cualquier origen a menos que el 
valor * sea reemplazado por un origen especifico (por ejemplo, http: //www.dominiol.com, 
lo que solo autorizara a aplicaciones desde el dominio www.dominiol.com a acceder al 
archivo). 


IMPORTANTE: El nuevo codigo PHP del Listado 13-7 agrega el valor solo a la 
cabecera retornada por el archivo procesar .php. Para incluir este parametro 
en la cabecera de cada uno de los archivos retornados por el servidor, 
necesitamos modificar los archivos de configuracion del servidor HTTP. Para 
encontrar mas informacion al respecto, visite los enlaces correspondientes a este 
capitulo en nuestro sitio web o lea las instrucciones de su servidor HTTP. 

Subiendo archivos 

Subir archivos a un servidor es una tarea que tarde o temprano todo desarrollador debe 
enfrentar. Es una caracterfstica requerida por casi toda aplicacion web estos dfas, pero no 
contemplada por navegadores hasta el momento. Esta API se hace cargo de la situacion 
incorporando un nuevo atributo que retorna un objeto XMLHttpRequestUpload. 
Utilizando este objeto podemos acceder a todos los metodos, propiedades y eventos de 
un objeto XMLHttpRequest pero tambien controlar el proceso de subida. 

upload Este atributo retorna un objeto XMLHttpRequestUpload. El atributo debe ser 
llamado desde un objeto XMLHttpRequest ya existente. 

Para trabajar con este atributo vamos a necesitar una nueva plantilla con un elemento 
<input > desde el que seleccionaremos el archivo a ser subido: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Ajax Level 2</title> 

clink rel="stylesheet" href="ajax.css"> 

<script src="ajax.js"></script> 
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</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Archivo a Subir:<brxinput type="file" name="archivos" 

id="archivos"></p> 

</form> 

</section> 

<section id="cajadatos"></section> 

</body> 

</html> 


Listado 13-8. Plantilla para subir archivos. 

Para subir un archivo tenemos que usar una referencia al archivo y enviarla como un 
campo de formulario. El objeto FormData estudiado en el ejemplo anterior es capaz de 
manejar esta clase de datos. El navegador detecta automaticamente la clase de 
informacion agregada al objeto FormData y crea las cabeceras apropiadas para iniciar la 
solicitud. El resto del proceso es exactamente el mismo estudiado anteriormente. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 

var archivos=document.getElementByld( 1 archivos'); 
archivos.addEventListener('change', subir, false); 

} 

function subir(e){ 

var archivos=e.target.files; 
var archivo=archivos[0]; 

var datos=new FormData(); 
datos.append( 1 archivo 1 ,archivo); 

var url="procesar.php"; 

var solicitud=new XMLHttpRequest(); 

var xmlupload=solicitud.upload; 

xmlupload.addEventListener('loadstart',comenzar,false); 
xmlupload.addEventListener('progress',estado,false); 
xmlupload.addEventListener('load',mostrar,false); 
solicitud.openf'POST", url, true); 
solicitud.send(datos); 

} 

function comenzar(){ 

cajadatos.innerHTML='<progress value="0" max="100">0%</progress>'; 

} 

function estado(e){ 

if(e.lengthComputable){ 

var por=parseInt(e.loaded/e.total*100); 

var barraprogreso=cajadatos.querySelector("progress"); 
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barraprogreso.value=por; 
barraprogreso.innerHTML=por+'% 1 ; 

} 

} 

function mostrar(e){ 

caj adatos.innerHTML='Terminado'; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-9. Subiendo un archivo con FormData. 

La principal funcion del Listado 13-9 es subirO. Esta funcion es llamada cuando el 
usuario selecciona un nuevo archivo desde el elemento <input> (y el evento change es 
disparado). El archivo seleccionado es recibido y almacenado en la variable archivo, 
exactamente del mismo modo que lo hicimos anteriormente para aplicar la API File en el 
Capitulo 12 y tambien para la API Drag and Drop en el Capftulo 8. Los metodos usados en 
cada ocasion retornan un objeto File. 

Una vez que tenemos la referenda al archivo, el objeto FormData es creado y el 
archivo es agregado a este objeto por medio del metodo append (). Para enviar este 
formulario, iniciamos una solicitud post. Primero, un objeto XMLHttpRequest comun es 
asignado a la variable de la solicitud. Mas adelante, usando el atributo upload, un objeto 
XMLHttpRequestUpload es creado y almacenado en la variable xmlupioad. Usando esta 
variable agregamos escuchas para todos los eventos disparados por el proceso de subida y 
finalmente la solicitud es enviada send (datos). 

El resto del codigo hace lo mismo que en el ejemplo del Listado 13-4; en otras 
palabras, una barra de progreso es mostrada en la pantalla cuando el proceso de subida 
comienza y luego es actualizada de acuerdo al progreso del mismo. 

Hagalo usted mismo: En este ejemplo indicamos que el archivo procesar.php se 
encargara de procesar los archivos enviados al servidor, pero no hacemos nada al 
respecto. Para probar el codigo anterior, puede utilizar un archivo procesar.php 
vacio. 

Aplicacion de la vida real 

Subir un archivo a la vez probablemente no sea lo que la mayorfa de los desarrolladores 
tengan en mente. Asi como tampoco lo es utilizar el elemento <input> para seleccionar 
los archivos a subir. En general, todo programador busca que sus aplicaciones sean lo mas 
intuitivas posible, y que mejor manera de lograrlo que combinando tecnicas y metodos a 
los que los usuarios ya estan familiarizados. Aprovechando API Drag and Drop, vamos a 
crear una aplicacion que se asemeja a lo que normalmente usamos en la vida real. Los 
archivos podran ser subidos al servidor simplemente arrastrandolos desde el Explorador 
de Archivos hasta un area en la pagina web. 

Creemos primero un documento HTML con la caja donde soltar los archivos: 
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<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Ajax Level 2</title> 

<link rel="stylesheet" href="ajax.css"> 
<script src="ajax.js"></script> 

</head> 

<section id="cajadatos"> 

<p>Suelte los archivos aqui</p> 
</section> 

</body> 

</html> 


Listado 13-10. Area para soltar los archivos a subir. 

El codigo Javascript para este ejemplo es probablemente el mas complejo de los que 
hemos visto hasta el momento a lo largo del libro. No solo combina varias APIs sino 
tambien varias funciones anonimas para mantener todo organizado y dentro del mismo 
entorno (dentro de la misma funcion). Este codigo debe tomar los archivos soltados 
dentro del elemento ca j adatos, listarlos en la pantalla, preparar el formulario virtual con 
esta informacion, hacer una solicitud para subir cada archivo al servidor y actualizar las 
barras de progreso de cada uno mientras son subidos. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 

cajadatos.addEventListener('dragenter 1 , function(e){ 

e.preventDefault(); }, false); 
cajadatos.addEventListener('dragover', function(e){ 

e.preventDefault(); }, false); 
cajadatos.addEventListener('drop', soltado, false); 

} 

function soltado(e){ 
e.preventDefault(); 
var archivos=e.dataTransfer.files; 
if(archivos.length){ 
var lista=' 1 ; 

for(var f=0;f<archivos.length;f++){ 
var archivo=archivos[f]; 

lista+= 1 <blockquote>Archivo: '+archivo.name; 

lista+= 1 <brxspanxprogress value="0" max="100">0% 

</progressx/span> 1 ; 

lista+='</blockquote>'; 

} 

cajadatos.innerHTML=lista; 
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var cuenta=0; 

var subir=function(){ 

var archivo=archivos[cuenta]; 

var datos=new FormDataO; 

datos.append( 1 archivo',archivo); 

var url="procesar.php"; 

var solicitud=new XMLHttpRequest(); 

var xmlupload=solicitud.upload; 

xmlupload.addEventListener('progress',function(e){ 
if(e.lengthComputable){ 
var hijo=cuenta+l; 

var por=parseInt(e.loaded/e.total*100); 

var barraprogreso=caj adatos.querySelector("block 

quote:nth-child("+hijo+") > span > progress"); 
barraprogreso,value=por; 
barraprogreso.innerHTML=por+'%'; 

} 

},false); 

xmlupload.addEventListener('load',function(){ 
var hijo=cuenta+l; 

var elemento=cajadatos.querySelector("blockquote:nth- 
child("+hijo+") > span"); 
elemento.innerHTML='Terminado!'; 

cuenta++; 

if(cuenta<archivos.length){ 
subir(); 

} 

},false); 

solicitud.open("POST", url, true); 
solicitud.send(datos); 

b- () 


window.addEventListener('load', iniciar, false); 


Listado 13-11. Subiendo archivos uno por uno. 

Bien, no es un codigo comodo para analizar, pero sera facil de entender si lo 
estudiamos paso a paso. Como siempre, todo comienza con la llamada a la funcion 
iniciar () cuando el documento es completamente cargado. Esta funcion crea una 
referencia al elemento caj adatos que sera la caja donde soltar los archivos, y agrega 
escuchas para tres eventos que controlan la operacion de arrastrar y soltar. Para conocer 
como se procesa exactamente esta operacion, lea nuevamente el Capitulo 8. Basicamente, 
el evento dragenter es disparado cuando los archivos que son arrastrados ingresan en el 
area del elemento caj adatos, el evento dragover es disparado periodicamente cuando 
los archivos arrastrados estan sobre este elemento, y el evento drop es disparado cuando 
los archivos son finalmente soltados dentro de la caja en la pantalla. No debemos hacer 
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nada para responder a los eventos dragenter y dragover en este ejemplo, por lo que 
los mismos son cancelados para prevenir el comportamiento por defecto del navegador. El 
unico evento al que responderemos es drop. La escucha para este evento llama a la 
funcion soltado () cada vez que algo es soltado dentro de cajadatos. 

La primera linea de la funcion soltado 0 tambien usa el metodo preventDefault () 
para poder hacer con los archivos lo que nosotros queremos y no lo que el navegador haria 
por defecto. Ahora que tenemos absoluto control de la situacion, es tiempo de procesar los 
archivos soltados. Primero, necesitamos obtener la lista de archivos desde el elemento 
dataTransfer. El valor retornado es un array que almacenamos en la variable archivos. 
Para estar seguros de que lo que fue soltado son archivos y no otra clase de elementos, 
controlamos el valor de la propiedad length con el condicional if (archivos. length) . Si 
este valor es diferente a 0 o null significa que uno o mas archivos han sido soltados dentro 
de la caja y podemos continuar con el proceso. 

Es hora de procesar los archivos recibidos. Con un bucle for navegamos a traves del 
array archivos y creamos una lista de elementos <blockquote> conteniendo cada uno 
el nombre del archivo y una barra de progreso encerrada en etiquetas <span>. Una vez 
que la construccion de la lista es finalizada, el resultado es mostrado en pantalla como el 
contenido de cajadatos. 

A simple vista parece que la funcion soltado () hace todo el trabajo, pero dentro de 
esta funcion creamos otra llamada subirO que se hace cargo del proceso de subir los 
archivos uno por uno al servidor. Por lo tanto, luego de mostrar todos los archivos en 
pantalla la siguiente tarea es crear esta funcion y llamarla por cada archivo en la lista. 

La funcion subirO fue creada usando una funcion anonima. Dentro de esta funcion, 
primero seleccionamos un archivo desde el array usando la variable cuenta como fndice. 
Esta variable fue previamente inicializada a 0, por lo que la primera vez que la funcion 
subir () es llamada, el primer archivo de la lista es seleccionado y subido. 

Para subir cada archivo usamos el mismo metodo que en anteriores ejemplos. Una 
referencia al archivo es almacenada en la variable archivo, un objeto FormData es 
creado usando el constructor FormData 0 y el archivo es agregado al objeto con el 
metodo append (). 

En esta oportunidad, solo escuchamos a dos eventos: progress y load. Cada vez que el 
evento progress es disparado, una funcion anonima es llamada para actualizar el estado 
de la barra de progreso del archivo que esta siendo subido. Para identificar el elemento 
<progress> correspondiente a ese archivo, usamos el metodo querySelector () con la 
pseudo clase :nth-chiid() . El indice de la pseudo clase es calculado usando el valor de la 
variable cuenta. Esta variable contiene el numero del fndice del array archivos, pero este 
indice comienza en 0 mientras que el indice para la lista de hijos accedidos por : nth- 
child () se inicia en el valor l. Para obtener el valor del indice correspondiente y 
referenciar el elemento <progress> correcto, agregamos l al valor de cuenta, 
almacenamos el resultado en la variable hi jo y usamos esta variable como indice. 

Cuando el proceso anterior es terminado, tenemos que informar sobre la situacion y 
avanzar hacia el siguiente archivo en el array archivos. Para este proposito, en la funcion 
anonima ejecutada cuando el evento load es disparado, incrementamos el valor de 
cuenta en una unidad, reemplazamos el elemento <progress> correspondiente al 
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archivo subido por el texto "Terminado!", y llamamos a la funcion subir () nuevamente 
(siempre y cuando queden aun archivos por procesar). 

Volvamos un poco a ver a grandes rasgos como el proceso es desarrollado. Si sigue el 
codigo del Listado 13-11, vera que, luego de declarar la funcion subir (), esta es llamada 
por primera vez al final de la funcion soltadoO. Debido a que la variable cuenta es 
inicializada a 0, el primer archivo contenido en el array archivos sera procesado en 
primer lugar. Mas adelante, cuando este archivo es subido por completo, el evento load 
es disparado y la funcion anonima llamada para responder al mismo incrementara el valor 
de cuenta una unidad y ejecutara la funcion subir () nuevamente para procesar el 
archivo siguiente. Al final, todos los archivos arrastrados y soldados dentro de la caja en 
pantalla habran sido subidos al servidor, uno por uno. 


13.2 Cross Document Messaging 

Esta parte de lo que llamamos API Communication es conocida oficialmente como API 
Web Messaging. Cross Document Messaging es una tecnica que permite a aplicaciones de 
diferentes origenes comunicarse entre si. Aplicaciones funcionando en diferentes cuadros, 
ventanas o pestanas (o incluso otras APIs) pueden comunicarse ahora aprovechando esta 
tecnologia. El procedimiento es simple: publicamos un mensaje desde un documento y lo 
procesamos en el documento destino. 

Constructor 

Para publicar mensajes, la API provee el metodo postMessage (): 

postMessage(mensaje, destino) Este metodo es aplicado al contentwindow del objeto 
window que recibe el mensaje. El atributo mensaje es una cadena de texto 
representando el mensaje a transmitir, y el atributo destino es el dominio del 
documento destino (que puede ser una URL o un puerto, como veremos mas adelante). 
El destino puede ser declarado como un dominio especifico, como cualquier documento 
usando el simbolo *, o como el mismo origen del documento que envia el mensaje 
usando el simbolo /. El metodo puede tambien incluir un array de puertos como tercer 
atributo. 

Evento message y propiedades 

El metodo de comunicacion es asincrono. Para escuchar por mensajes enviados por un 
documento en particular, la API ofrece el evento message, el cual incluye algunas 
propiedades con informacion sobre la operacion: 

data Esta propiedad retorna el contenido del mensaje. 
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origin Esta propiedad retorna el origen del documento que envio el mensaje, generalmente 
el dominio. Este valor puede ser usado luego para enviar un mensaje de regreso. 
source Esta propiedad retorna un objeto usado para identificar a la fuente del mensaje. 
Este valor puede ser usado para apuntar al documento que envia el mensaje, como 
veremos mas adelante. 

Enviando mensajes 

Para crear un ejemplo de esta API, tenemos que considerar lo siguiente: la comunicacion 
ocurre entre diferentes ventanas (ventanas, cuadros, pestanas u otras APIs), debido a esto 
debemos generar documentos y codigos para cada extremo del proceso. Nuestro ejemplo 
incluye una plantilla con un iframe (cuadro interno) y los codigos Javascript apropiados 
para cada documento HTML. Comencemos por el documento principal: 


<!DOCTYPE html> 
chtml lang="es"> 

<title>Cross Document Messaging</title> 

<link rel="stylesheet" href="messaging.css"> 

<script src="messaging.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Su nombre: <input type="text" name="nombre" id="nombre" 

requiredx/p> 

<pxinput type= "button" name="boton" id="boton" 

value="Enviar"></p> 

</form> 

</section> 

<section id="cajadatos"> 

ciframe id="iframe" src="iframe.html" width="500" 

height="350"></iframe> 

</section> 

</body> 

</html> 


Listado 13-12. Plantilla para comunicacion entre documentos. 

Como podemos ver, al igual que en plantillas previas, incluimos dos elementos 
<section>, pero esta vez cajadatos contiene un <iframe> que cargara el archivo 
iframe.html. Vamos a volver a esto en un momento. Antes agreguemos algunos estilos 
a esta estructura: 
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#cajaformulario{ 
float: left; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 50Opx; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 


Listado 13-13. Estilos para las cajas en pantalla (messaging, css). 

El codigo Javascript para el documento principal tiene que tomar el valor del campo 
nombre del formulario y enviarlo como un mensaje al documento dentro del iframe 
usando el metodo postMessage (): 


function iniciar(){ 

var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 
var iframe=document.getElementByld('iframe'); 

iframe.contentWindow.postMessage(nombre, ; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-14. Publicando un mensaje (messaging, js). 

En el codigo del Listado 13-14, el mensaje fue compuesto por el valor del campo 
nombre. El sfmbolo * fue usado como valor de destino para enviar este mensaje a 
cualquier documento dentro del iframe (sin importar su origen). 

Una vez que el boton "Enviar" es presionado, la funcion enviar () es llamada y el 
valor del campo es enviado al contenido del iframe. Ahora es momento de tomar ese 
mensaje y procesarlo. Recuerde que el documento destinado a ser abierto en un iframe es 
exactamente igual a uno abierto en la ventana principal. El iframe simplemente Simula una 
ventana dentro del documento. Por este motivo, vamos a crear una pequena plantilla 
similar a la anterior pero solo con el proposito de mostrar la informacion recibida: 
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<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>iframe window</title> 

<script src="iframe.js"></script> 

</head> 

<body> 

<section> 

<divxb>Mensaje desde la ventana principal: </bx/div> 
<div id="cajadatos"x/div> 

</section> 

</body> 

</html> 


Listado 13-15. Plantilla para el if rame (iframe.html). 

Esta plantilla tiene su propia cajadatos que sera usada para mostrar el mensaje 
recibido en la pantalla, y tambien su propio codigo Javascript para procesarlo: 


function iniciar(){ 

window.addEventListener('message', receptor, false); 

} 

function receptor(e){ 

var caj adatos=document.getElementByld( 1 caj adatos'); 
cajadatos.innerHTML='mensaje desde: '+e.origin+'<br>'; 
caj adatos.innerHTML+='mensaj e: '+e.data; 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-16. Procesando los mensajes desde el destino ( i frame .js). 

Acorde a lo que explicamos anteriormente, para escuchar los mensajes la API provee el 
evento message y algunas propiedades. En el codigo del Listado 13-16, una escucha para 
este evento fue agregada y la funcion receptor () fue declarada para responder al 
mismo. Esta funcion muestra el contenido del mensaje usando la propiedad data e 
informacion acerca del documento que lo envio usando el valor de origin. 

Recuerde que este codigo pertenece al documento HTML del iframe, no al documento 
principal del Listado 13-12. Estos son dos documentos diferentes con sus propios entornos, 
objetivos y codigos (uno es abierto en la ventana principal y el otro dentro del iframe). 

Hagalo usted mismo: Hay un total de cinco archivos que tienen que ser creados y 
subidos al servidor para poder probar este ejemplo. Primero, cree un nuevo archivo 
HTML con el codigo del Listado 13-12 que sera nuestro documento principal. Este 
documento tambien requiere el archivo messaging.css con los estilos del 
Listado 13-13 y el archivo messaging, js con el codigo Javascript del Listado 13- 
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14. La plantilla del Listado 13-12 contiene un elemento <iframe> con el archivo 
iframe.html como su fuente. Necesitara crear tambien este archivo y copiar en 
su interior el codigo del Listado 13-15 y ademas generar el correspondiente archivo 
iframe. js con los codigos del Listado 13-16. Suba todos los archivos a su servidor, 
abra el primer documento HTML en su navegador y envie su nombre o cualquier 
texto al iframe usando el formulario en pantalla. 

Filtros y multiples origenes 

Lo que hemos hecho hasta ahora no es una practica recomendable, especialmente si 
consideramos asuntos de seguridad. El codigo en el documento principal envfa un mensaje 
a un iframe especifico, pero no controla los documentos dentro de ese iframe que estaran 
autorizados a leerlo (cualquier documento dentro del iframe podra leer el mensaje). Del 
mismo modo, el codigo de nuestro ejemplo para el iframe no controla el origen y procesa 
todo mensaje recibido. Ambas partes del proceso de comunicacion tienen que ser 
mejoradas para prevenir abusos o errores. 

En el siguiente ejemplo, vamos a corregir esta situacion y estudiar el procedimiento a 
seguir para responder a un mensaje del documento origen usando otra propiedad del 
evento message llamada source. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Cross Document Messaging</title> 

<link rel="stylesheet" href="messaging.css"> 

<script src="messaging.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Su nombre: <input type="text" name="nombre" id="nombre" 

requiredx/p> 

<pxinput type= "button" name="boton" id="boton" 

value="Enviar"x/p> 

</form> 

</section> 

<section id="cajadatos"> 

<iframe id="iframe" src="http://www.dominio2.com/iframe.html" 
width= " 5 0 0 " he ight = " 3 5 0 " x / i frame > 

</section> 

</body> 

</html> 


Listado 13-17. Comunicandonos con un origen/destino especificos. 
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Supongamos que el nuevo documento HTML con el codigo del Listado 13-17 esta 
localizado en www.dominiol.com, pero el codigo para el iframe es cargado desde una 
segunda ubicacion en www.dominio2.com. Para prevenir abusos y errores, necesitaremos 
declarar estos dominios en el codigo y ser especfficos sobre quien estara autorizado a leer 
los mensajes y desde donde. 

En el codigo del Listado 13-17, no estamos solo cargando el archivo HTML para el 
iframe sino declarando la ruta completa hacia otro servidor (www.dominio2.com). El 
documento principal se encontrara en www.dominiol.com y el contenido del iframe en 
www.dominio2.com. Los siguientes codigos consideran esta situacion: 


function iniciar(){ 

var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

window.addEventListener('message', receptor, false); 

} 

function enviar(){ 

var nombre=document.getElementByld( 1 nombre').value; 
var iframe=document.getElementByld( 1 iframe'); 

iframe.contentWindow.postMessage(nombre, 'http://www.daminio2.com'); 

} 

function receptor(e){ 

if(e.origin=-'http://www.dominio2.com'){ 

document.getElementByld('nombre').value=e.data; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-18. Comunicandonos con origenes especificos (messaging, js). 

Preste atencion a la funcion enviar () en el Listado 13-18. El metodo postMessageO 
ahora declara un destino especifico para el mensaje (www.dominio2.com). Solo documentos 
dentro del iframe y que provengan de ese origen especifico pod ran leer este mensaje. 

En la funcion iniciar () del Listado 13-18 tambien agregamos una escucha para el 
evento message. El proposito de esta escucha y de la funcion receptor () es recibir la 
respuesta enviada desde el iframe. Esto cobrara sentido en unos minutos. 

Veamos ahora el codigo Javascript ejecutado en el iframe que nos ayudara a entender 
como un mensaje proveniente de un origen especifico es procesado y como respondemos 
al mismo (usaremos exactamente el mismo documento HTML del Listado 13-15 para el 
iframe). 


function iniciar(){ 

window.addEventListener('message', receptor, false); 

} 
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function receptor(e){ 

var caj adatos=document.getElementByld('caj adatos'); 
if(e.origin== 1 http://www.dominiol.com 1 ){ 

cajadatos.innerHTML='mensaje valido: '+e.data; 
e.source.postMessage('mensaje recibido', e.origin); 
}else{ 

cajadatos.innerHTML='origen invalido'; 

} 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 13-19. Respondiendo al documento principal (iframe.js). 

Filtrar el origen es tan simple como comparar el valor de la propiedad origin con el 
dominio del cual queremos leer los mensajes. Una vez que comprobamos que el origen es 
valido, el mensaje es mostrado en pantalla y luego una respuesta es enviada de regreso 
aprovechando el valor de la propiedad source. La propiedad origin es tambien usada 
para declarar que esta respuesta estara solo disponible para la ventana que envio el 
mensaje en primer lugar. Ahora puede regresar al Listado 13-18 para comprender como la 
funcion receptor () procesara esta respuesta. 

Hagalo usted mismo: Este ultimo ejemplo es un poco enganoso. Estamos usando 
dos origenes diferentes, por lo que necesitara dos dominios diferentes (o 
subdominios) para comprobar el funcionamiento de los codigos. Reemplace los 
dominios declarados en los codigos por los suyos propios y luego suba los 
archivos correspondientes al documento principal en uno y los correspondientes 
al iframe en el otro. El documento principal cargara en el iframe el codigo desde 
el segundo dominio y asi podra ver como funciona el proceso de comunicacion 
entre estos dos origenes diferentes. 


13.3 Web Sockets 

En esta parte del capitulo, describiremos el ultimo componente de lo que consideramos 
API Communication. API WebSocket ofrece soporte para comunicaciones bidireccionales 
entre navegadores y servidores. La comunicacion es realizada a traves de conexiones TCP, 
sin enviar cabeceras HTTP, reduciendo de este modo la cantidad de datos transmitidos en 
cada llamada. Ademas, la conexion es persistente, permitiendo a los servidores mantener 
a los navegadores permanentemente informados. Esto significa que no deberemos 
encargarnos de llamar al servidor a cada momento para obtener datos actualizados; en su 
lugar, el servidor mismo de forma automatica nos enviara informacion acerca de la 
situacion actual. 

WebSocket puede ser considerado por algunos como una mejora de Ajax, pero es en 
realidad una alternativa totalmente diferente de comunicacion que permite la construccion 


297 




El gran libro de HTML5, CSS3 y Javascript 


de aplicaciones en tiempo real en una plataforma escalable (por ejemplo, video juegos para 
multiples jugadores, salas de chat, etc...). 

La API es simple. Solo unos pocos metodos y eventos son incluidos para abrir y cerrar 
conexiones y enviar y escuchar por mensajes. Sin embargo, ningun servidor soporta este 
protocolo por defecto. Debido a esto, necesitaremos instalar nuestro propio servidor WS 
(servidor WebSocket) para poder establecer comunicacion entre el navegador y el 
servidor que aloja a la aplicacion. 

Configuration del servidor WS 

Un programador experimentado seguramente podra descubrir por si mismo como 
construir un servidor WS, pero para aquellos que deseamos dedicar nuestro tiempo libre a 
actividades un tanto mas recreativas, ya se encuentran disponibles en la web varios 
codigos que nos permitiran configurar nuestro propio servidor WS y procesar conexiones 
en unos pocos minutos. Dependiendo de sus preferencias, puede optar por codigos 
programados en PHP, Java, Ruby, y otros. 

IMPORTANTE: Al momento de escribir estas lineas, la especificacion esta siendo 
mejorada y expandida debido a problemas de seguridad y aun no se encuentran 
servidores WS disponibles que soporten estas mejoras. Para obtener una lista 
completa, visite nuestro sitio web y siga los enlaces correspondientes a este 
capitulo. 

Los siguientes ejemplos estaran orientados al uso de un servidor sencillo programado 
en PHP llamado phpwebsocket (code.google.com/p/phpwebsocket/). Este servidor utiliza 
un unico archivo llamado server.php que responde a una serie de codigos pre 
programados, como veremos mas adelante. El archivo debe ser subido a un servidor y 
luego ejecutado por medio de un sistema del tipo Telnet como Putty, por ejemplo. 

WebSocket usa una conexion persistente, por lo que el codigo del servidor WS tiene 
que funcionar todo el tiempo, capturando solicitudes y enviando actualizaciones a los 
navegadores conectados. Usando Putty puede acceder a su servidor desde una consola y 
ejecutar los comandos necesarios para poner el servidor WS en marcha. 

Hagalo usted mismo: En primer lugar debe contar con las herramientas adecuadas. 
Instale su consola de acceso Telnet o descargue Putty desde www.chiark. 
greenend.org.uk/~sgtatham/putty/. Tambien necesita descargar el archivo 
server.php del servidor phpwebsocket disponible en http://code.google.com/ 
p/phpwebsocket/. Modifique los datos de acceso dentro de este archivo (dominio o 
IP de su servidor y puerto), y subalo a su servidor. Desde la consola Telnet acceda al 
servidor y ejecute el archivo con el siguiente comando: php -q server.php. Esto 
pondra en marcha el servidor WS. 
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IMPORTANTE: El servidor no solo se encarga de establecer la comunicacion entre el 
navegador y el servidor sino que ademas esta a cargo de generar la respuesta 
adecuada. La forma de construir y realizar esta respuesta esta programada dentro 
del mismo codigo del servidor. Debera adaptar este codigo a las necesidades de su 
aplicacion. 

Constructor 

Antes de programar los codigos para interactuar con el servidor WS, veamos lo que la API 
ofrece con este fin. La especificacion declara solo una interface con unos pocos metodos, 
propiedades y eventos, ademas de un constructor, para establecer la conexion: 

WebSocket(url) Este constructor inicia una conexion entre la aplicacion y el servidor WS 
apuntado por el atributo uri. Retorna un objeto WebSocket referenciando esta 
conexion. Un segundo atributo puede ser especificado para proveer un array con sub 
protocolos de comunicacion. 

Metodos 

La conexion es iniciada por el constructor, por lo que solo necesitamos dos metodos para 
utilizarla: 

send(datos) Este es el metodo necesario para enviar un mensaje al servidor WS. El valor 
del atributo datos representa los datos a ser transmitidos (normalmente una cadena 
de texto). 

close() Este metodo cierra la conexion. 

Propiedades 

Algunas propiedades no permiten conocer la configuracion y el estado de la conexion: 

url Muestra la URL a la cual la aplicacion esta conectada. 
protocol Esta propiedad retorna el sub protocolo usado, si existe. 

readyState Esta propiedad retorna un numero representando el estado de la conexion: 0 
significa que la conexion no ha sido aun establecida, 1 significa que la conexion fue 
abierta, 2 significa que la conexion esta siendo cerrada, y 3 significa que la conexion 
fue cerrada. 

bufferedAmount Esta es una propiedad extremadamente util que nos permite conocer la 
cantidad de datos requeridos pero aun no enviados al servidor. El valor retornado nos 
ayuda a regular la cantidad de datos y la frecuencia de cada solicitud para evitar 
saturar al servidor. 
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Eventos 

Para conocer el estado de la conexion y escuchar por mensajes enviados por el servidor, 
debemos usar eventos. La API ofrece los siguientes: 

open Este evento es disparado cuando la conexion es abierta. 

message Este evento es disparado cuando un mensaje proveniente del servidor se 
encuentra disponible. 

error Este evento es disparado cuando ocurre un error, 
close Este evento es disparado cuando la conexion es cerrada. 

Plantilla 

El archivo server.php del servidor WS que usamos como ejemplo contiene una funcion 
process 0 que procesa una pequena lista de comandos predefinidos y envia de regreso 
la respuesta apropiada. Para probar esta API, vamos a usar un formulario en el que 
podremos ingresar uno de estos comandos y enviarlos al servidor: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>WebSocket</title> 

clink rel="stylesheet" href="websocket,css"> 
cscript src="websocket. js"x/script> 

</head> 

<body> 

csection id="cajaformulario"> 
cform name="formulario"> 

<p>Comando: cbrxinput type="text" name="comando" 

id= " comando " >< /p > 

cpxinput type= "button" name="boton" id="boton" 

value="Enviar"></p> 

</form> 

</section> 

csection id="cajadatos">c/section> 
c/body> 
c/html> 


Listado 13-20. Insertando commandos. 

Tambien crearemos un archivo CSS llamado websocket.css con los siguientes 
estilos: 


#cajaformulario{ 
float: left; 
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padding: 2 Opx; 

border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 5 0 Opx; 
height: 35Opx; 
overflow: auto; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 


Listado 13-21. Estilos habitudes para las cajas. 

Iniciar la comunicacion 

Como siempre, el codigo Javascript es responsable de todo el proceso. En el siguiente 
listado, crearemos nuestra primera aplicacion de comunicaciones para entender la forma 
de trabajo de esta API: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

socket=new WebSocket("ws://www.dominio.com:12345/server.php"); 
socket.addEventListener('message', recibido, false); 

} 

function recibido(e){ 

var lista=cajadatos.innerHTML; 

caj adatos.innerHTML='Recibido: 1 +e.data+'<br> 1 +lista; 

} 

function enviar(){ 

var comando=document.getElementByld('comando').value; 
socket.send(comando); 

} 

window.addEventListener('load', iniciar, false); 


Listado 13-22. Enviando mensajes at servidor. 

En la funcion iniciar (), el objeto WebSocket es construido y almacenado en la 
variable socket. El atributo url del constructor apunta hacia la ubicacion del archivo 
server.php en nuestro servidor, incluyendo el puerto de conexion (en este ejemplo, 
12345). Generalmente la direction del servidor WS sera declarada con el valor IP 
correspondiente al servidor (en lugar de un dominio) y un valor de puerto como 8000 u 
8080, pero esto dependera de sus necesidades, la configuracion de su servidor, la ubicacion 
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de su archivo, etc... El uso de la IP en lugar del dominio es una practica recomendada para 
evitar el proceso de traduccion DNS. En cada una de las llamadas, la red realiza un proceso 
de traduccion de las direcciones web para obtener las direcciones reales de los servidores a 
los que corresponden. Si en lugar de especificar un dominio declaramos directamente la 
direction IP de nuestro servidor, evitamos esta operation, estableciendo una comunicacion 
mas fluida. 

Luego de que obtenemos el objeto WebSocket, una escucha para el evento message es 
agregada. Este evento sera disparado cada vez que el servidor WS envie un mensaje al 
navegador. La funcion recibido () fue declarada para responder al mismo. Como en otras 
API, este evento tambien incluye la propiedad data que retorna el contenido del mensaje. 
En la funcion recibido (), usamos esta propiedad para mostrar el mensaje en pantalla. 

Para enviar mensajes al servidor incluimos la funcion enviarf). El valor insertado en 
el elemento <input> llamado comando es tornado por esta funcion y enviado al servidor 
WS usando el metodo send (). 

IMPORTANTE: El archivo server.php contiene una funcion llamada process () 
para procesar cada llamada y enviar una respuesta acorde a los datos recibidos. 
Usted puede cambiar esta funcion para satisfacer las necesidades de su 
aplicacion, pero para nuestros ejemplos la hemos considerado exactamente 
como es ofrecido en Google Codes. La funcion toma el valor del mensaje recibido 
y lo compara con una lista de comandos predefinidos. Los comandos disponibles 
en la version que utilizamos para probar estos ejemplos son: hello, hi, name, 
age, date, time, thanks, y bye. Por ejemplo, si enviamos el mensaje "hello", el 
servidor nos respondera "hello human". 

Aplicacion completa 

En nuestro primer ejemplo podemos ver como funciona el proceso de comunicacion de 
esta API. El constructor WebSocket inicia la conexion, el metodo sendO envia cada 
mensaje al servidor para ser procesado, y el evento message informa a la aplicacion sobre 
las respuestas recibidas. Sin embargo, no cerramos la conexion, no controlamos por 
errores, e incluso no detectamos cuando la conexion estaba lista para trabajar. Veamos 
ahora un ejemplo que aprovecha todos los eventos provistos por la API para informar 
sobre el estado de la conexion en cada paso del proceso. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

socket=new WebSocket("ws://www.dominio.com:12345/server.php"); 

socket.addEventListener('open', abierto, false); 
socket.addEventListener('message 1 , recibido, false); 
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socket.addEventListener( 1 close 1 , cerrado, false); 
socket.addEventListener( 1 error 1 , errores, false); 

} 

function abierto(){ 

cajadatos.innerHTML='CONEXION ABIERTA<br>'; 

caj adatos.innerHTML+='Estado: '+socket.readyState; 

} 

function recibido(e){ 

var lista=cajadatos.innerHTML; 

caj adatos.innerHTML='Recibido: 1 +e.data+'<br> 1 +lista; 

} 

function cerrado(){ 

var lista=cajadatos.innerHTML; 

cajadatos.innerHTML='CONEXION CERRADA<br> 1 +lista; 

var boton=document.getElementByld('boton'); 
boton.disabled=true; 

} 

function errores(){ 

var lista=cajadatos.innerHTML; 
cajadatos.innerHTML='ERROR<br>'+lista; 

} 

function enviar(){ 

var comando=document.getElementByld('comando').value; 
if(comando=='cerrar 1 ){ 
socket.close(); 

}else{ 

socket.send(comando); 

} 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 13-23. Informando el estado de la conexion. 

Incluimos algunas mejoras en el codigo del Listado 13-23 comparado con el ejemplo 
anterior. Escuchas para todos los eventos disponibles en el objeto WebSocket fueron 
agregadas junto con las funciones apropiadas para responder a cada uno de ellos. 
Tambien mostramos el estado de la conexion cuando es abierta usando el valor de la 
propiedad readyState, cerramos la conexion usando el metodo close () cuando el 
comando "cerrar" es enviado por el usuario desde el formulario, y desactivamos el boton 
"Enviar" cuando la conexion es cerrada (boton. disabled=true). 

Hagalo usted mismo: Este ultimo ejemplo requiere el documento HTML y los 
estilos CSS de los Listados 13-20 y 13-21. Suba estos archivos a su servidor y, si aun 
no lo ha hecho, ejecute el servidor WS con la instruction php -q server.php 
(como ya explicamos, esto es realizado desde una consola Telnet como Putty). Una 
vez que el servidor es activado, abra el documento HTML en su navegador. Inserte 
comandos en el formulario en pantalla y presione el boton "Enviar". Deberfa 
obtener respuestas del servidor de acuerdo al comando insertado (hello, hi, 
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name, age, date, time, thanks, o bye). Envie el comando "cerrar" para cerrar la 
conexion. 

IMPORTANTE: Si el servidor no funciona correctamente, los errores producidos 
seran retornados dentro de la consola Telnet. Controle esta consola para 
descubrir inconvenientes en la conexion. 

13.4 Referenda rapida 

HTML5 incorpora tres API diferentes con propositos de comunicacion. XMLHttpRequest 
Level 2 es una mejora del viejo objeto XMLHttpRequest usado para la construccion de 
aplicaciones Ajax. La API Web Messaging ofrece un sistema de comunicacion para 
diferentes ventanas, pestanas, iframes, o incluso otras APIs. Y la API WebSocket provee 
una nueva alternativa para establecer una conexion rapida y efectiva entre navegadores y 
servidores. 

XMLHttpRequest Level 2 

Esta API tiene un constructor para objetos XMLHttpRequest y algunos metodos, propiedades y 
eventos para procesar la conexion. 

XMLHttpRequest() Este constructor retorna el objeto XMLHttpRequest que necesitamos 
para iniciar y procesar una conexion con el servidor. 
open(metodo, url, asi'ncrono) Este metodo abre la conexion entre la aplicacion y el 
servidor. El atributo metodo determina que metodo HTTP sera usado para enviar la 
informacion (get o post). El atributo url declara la ruta hacia el codigo que recibira y 
procesara esta informacion. Y el atributo asincrono es un valor booleano que 
establece si la conexion sera sfncrona o asincrona (true para asincrona). 
send(datos) Este metodo envia el valor del atributo datos al servidor. El atributo datos 
puede ser un ArrayBuffer, un blob, un documento, una cadena de texto o un objeto 
FormData. 

abort() Este metodo cancela la solicitud. 

timeout Esta propiedad establece el tiempo en milisegundos que tiene la solicitud para ser 
procesada. 

readyState Esta propiedad retorna un valor representando el estado de la conexion: 0 
significa que el objeto fue construido, 1 significa que la conexion fue abierta, 2 significa 
que la cabecera de la respuesta ha sido recibida, 3 significa que la respuesta esta 
siendo recibida, 4 significa que la transmision de datos ha sido completada. 
responseType Esta propiedad retorna el tipo de respuesta. Puede ser declarada para 
cambiar el tipo de respuesta. Los posibles valores son arraybuffer, blob, 
document, y text. 

response Esta propiedad retorna la respuesta a la solicitud en el formato declarado por la 
propiedad responseType. 
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responseText Esta propiedad retorna la respuesta a la solicitud en formato texto. 
responseXML Esta propiedad retorna la respuesta a la solicitud como si fuera un documento 
XML. 

loadstart Este evento es disparado cuando la solicitud es iniciada. 

progress Este evento es disparado periodicamente mientras la solicitud es procesada. 

abort Este evento es disparado cuando la solicitud es abortada. 

error Este evento es disparado cuando ocurre un error. 

load Este evento es disparado cuando la solicitud ha sido completada exitosamente. 
timeout Este evento es disparado cuando la solicitud toma mas tiempo en ser procesada 
que el especificado por la propiedad timeout, 
loadend Este evento es disparado cuando la solicitud ha sido completada (en ambos 
casos, exito o error). 

Un atributo especial fue incluido para obtener un objeto XMLHttpRequestUpload en 
lugar del objeto XMLHttpRequest con el proposito de subir datos al servidor. 

upload Este atributo retorna un objeto XMLHttpRequestUpload. Este objeto usa los mismos 
metodos, propiedades y eventos de un objeto XMLHttpRequest pero con el proposito de 
procesar la subida de archivos. 

La API tambien incluye una interface para crear objetos FormData representando 
formularios HTML. 

FormData() Este constructor retorna un objeto FormData para representar un formulario 
HTML. 

append(nombre, valor) Este metodo agrega datos a un objeto FormData. Cada dato agregado 
al objeto representa un campo de formulario, con su nombre y valor declarado en los 
atributos. Una cadena de texto o un blob pueden ser provistos para el atributo valor. 

Esta API usa la interface ProgressEvent (tambien usada por otras APIs para controlar el 
progreso de una operacion) que incluye las siguientes propiedades: 

lengthComputable Esta propiedad es un valor booleano que determina si los valores del 
resto de las propiedades son validos. 

loaded Esta propiedad retorna la cantidad total de bytes ya descargados o subidos. 
total Esta propiedad retorna el tamano total en bytes de los datos que estan siendo 
descargados o subidos. 

API Web Messaging 

Esta API esta constituida solo por una interface que provee metodos, propiedades y 
eventos para comunicar entre si aplicaciones ubicadas en diferentes ventanas, pestanas, 
iframes o incluso otras API. 
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postMessage(mensaje, destino) Este metodo envia un mensaje a una contentwindow 
especifica y al documento declarado como destino por el atributo destino. El atributo 
mensaj e es el mensaje a ser transmitido. 
message Este evento es disparado cuando un mensaje es recibido. 
data Esta propiedad del evento message retorna el contenido del mensaje recibido. 
origin Esta propiedad del evento message retorna el origen del documento que envio el 
mensaje. 

source Esta propiedad del evento message retorna una referenda a la ventana desde la 
que el mensaje fue enviado. 

API WebSocket 

Esta API incluye un constructor que retorna un objeto WebSocket e inicia la conexion. 
Ademas, provee algunos metodos, propiedades y eventos para controlar la comunicacion 
entre el navegador y el servidor. 

WebSocket(url) Este constructor retorna un objeto WebSocket e inicia la conexion con el 
servidor. El atributo url declara la ruta del codigo del servidor WS y el puerto de 
comunicacion. Un array con sub protocolos puede ser especificado como un segundo 
atributo. 

send(datos) Este metodo envia un mensaje al servidor WS. El atributo datos debe ser una 
cadena de texto con el mensaje a ser enviado. 
close() Este metodo cierra la conexion con el servidor WS. 

url Esta propiedad muestra la URL que la aplicacion esta usando para conectarse al 
servidor WS. 

protocol Esta propiedad retorna el sub protocolo usado por la conexion, si existe. 
readyState Esta propiedad retorna un valor representando el estado de la conexion: 0 
significa que la conexion no ha sido aun establecida, 1 significa que la conexion fue 
abierta, 2 significa que la conexion esta siendo cerrada, y 3 significa que la conexion 
fue cerrada. 

bufferedAmount Esta propiedad retorna la cantidad total de datos que esperan ser 
enviados al servidor. 

open Este evento es disparado cuando la conexion es abierta. 

message Este evento es disparado cuando el servidor envia un mensaje a la aplicacion. 
error Este evento es disparado cuando ocurre un error, 
close Este evento es disparado cuando la conexion es cerrada. 
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14.1 Haciendo el trabajo duro 

Javascript se ha convertido en la principal herramienta para la construccion de 
aplicaciones exitosas en Internet. Como explicamos en el Capftulo 4, ya no es solo una 
alternativa para la creacion de llamativos (a veces irritantes) trucos para la web. El 
lenguaje se ha vuelto una parte esencial de la web y una tecnologia que cada 
desarrollador necesita entender e implementar. 

Javascript ya ha alcanzado el estado de lenguaje de proposito general, una condicion 
en la cual es forzado a proveer caracteristicas elementales que por naturaleza no posee. 
Este lenguaje fue concebido como un lenguaje interpretado, creado con la intencion de 
ser procesado un codigo a la vez. La ausencia de multiprocesamiento en Javascript 
(procesamiento de multiples codigos al mismo tiempo) reduce su eficiencia, limita su 
alcance y vuelve a algunas aplicaciones de escritorio imposibles de emular en la web. 

Web Workers es una API disenada con el proposito especffico de convertir Javascript 
en un lenguaje multiproceso y resolver este problema. Ahora, gracias a HTML5, podemos 
ejecutar codigos exigentes detras de escena mientras el codigo principal sigue siendo 
ejecutado en la pagina web. 

Creando un trabajador 

La forma en la que Web Workers trabaja es simple: el trabajador (worker) es construido en 
un archivo Javascript separado y los codigos son comunicados entre si a traves de mensajes. 
Normalmente, el mensaje enviado al trabajador (worker) desde el codigo principal es la 
information que queremos que sea procesada, mientras que los mensajes enviados en 
respuesta desde el trabajador representan el resultado de este procesamiento. Para enviary 
recibir estos mensajes, la API aprovecha tecnicas implementadas en otras API ya estudiadas. 
Eventos y metodos que ya conocemos son usados para enviar y recibir mensajes desde un 
codigo al otro. Los siguientes son los elementos provistos por la API con este proposito: 

Worker(codigoURL) Antes de comunicarnos con el trabajador, debemos obtener un 
objeto que apunta al archivo que contiene el codigo del trabajador. Este metodo 
retorna un objeto Worker. El atributo codigoURL es la URL del archivo que contiene el 
codigo que sera ejecutado detras de escena. 
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postMessage(mensaje) Este metodo es el mismo estudiado antes en el Capitulo 13 para 
Web Messaging API, pero ahora implementado para el objeto Worker. El metodo envia 
un mensaje hacia o desde el codigo del trabajador. El atributo mensaje es una cadena 
de texto o un objeto JSON representando el mensaje a ser transmitido. 
message Este es un evento ya estudiado que escucha por mensajes enviados al codigo. Del 
mismo modo que el metodo postMessage (), este evento puede ser aplicado en el codigo 
principal o en el trabajador. Utiliza la propiedad data para obtener el mensaje enviado. 

Enviando y recibiendo mensajes 

Para estudiar como los trabajadores y el codigo principal se comunican entre si, vamos a 
usar una plantilla simple conteniendo un formulario donde ingresar nuestro nombre y una 
caja donde mostrar la respuesta recibida. 

Todo ejemplo de Web Workers, incluso el mas sencillo, requiere al menos tres 
archivos: el documento principal, el codigo Javascript principal, y el archivo con el codigo 
para el trabajador. El siguiente sera nuestro documento HTML: 


<!DOCTYPE html> 

<html lang="es"> 

<title>WebWorkers</title> 

<link rel="stylesheet" href="webworkers.css"> 

<script src="webworkers.js"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 

<p>Nombre : <brxinput type="text" name="nombre" 

id="nombre"> </p > 

<pxinput type= "button" name="boton" id="boton" 

value=" Enviar"x/p> 

</form> 

</section> 

< sect ion id="cajadatos"x/section> 

</body> 

</html> 


Listado 14-1. Plantilla para probar Web Workers. 

En la plantilla incluimos un archivo CSS llamado webworkers.css que contendra las 
siguientes reglas: 


#cajaformulario{ 
float: left; 
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padding: 2 Opx; 

border: lpx solid #999999; 

} 

#cajadatos{ 
float: left; 
width: 5 0 Opx; 
margin-left: 2 Opx; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 


Listado 14-2. Estilos para las cajas. 

El codigo Javascript para el documento principal tiene que ser capaz de enviar la 
informacion que queremos procesar en el trabajador. Tambien debe estar preparado para 
escuchar por respuestas. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

trabaj ador=new Worker( 1 trabaj ador.j s 1 ); 

trabajador.addEventListener('message', recibido, false); 

} 

function enviar(){ 

var nombre=document.getElementByld( 1 nombre').value; 

trabajador.postMessage(nombre); 

} 

function recibido(e){ 

caj adatos.innerHTML=e.data; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 14-3. Un uso simple de la API. 

El Listado 14-3 presenta el codigo para nuestro documento principal (el que se 
encuentra dentro del archivo webworkers. js). En la funcion iniciar (), luego de la 
creacion de las necesarias referencias para el elemento cajadatos y el boton del 
formulario, el objeto Worker es construido. El constructor Worker () declara al archivo 
trabajador. js como el contenedor del codigo para el trabajador y retorna un objeto 
Worker referenciando a este archivo. Todo proceso de interaccion con este objeto sera en 
realidad una interaccion con el codigo de ese archivo. 

Luego de la construccion de este objeto, agregamos una escucha para el evento 
message con la intension de escuchar por mensajes provenientes del trabajador. Cuando 
un mensaje es recibido, la funcion recibido () es llamada y el valor de la propiedad 
data (el mensaje) es mostrado en pantalla. 
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La otra parte de la comunicacion es realizada por la funcion enviarO. Cuando el 
usuario hace clic sobre el boton "Enviar", el valor del campo nombre es enviado como un 
mensaje hacia el trabajador usando postMessage (). 

Con las funciones recibido () y enviar () a cargo de la comunicacion, estamos listos 
para enviar mensajes al trabajador y procesar sus respuestas. Es momento de preparar el 
codigo para el trabajador: 


addEventListener('message 1 , recibido, false); 

function recibido(e){ 

var respuesta='Su nombre es '+e.data; 
postMessage(respuesta); 

} 


Listado 14-4. Codigo para el trabajador ( trabajador. js). 

Del mismo modo que el codigo principal, el codigo para el trabajador tiene que 
escuchar constantemente por mensajes usando el evento message. La primera linea del 
codigo en el Listado 14-4 agrega una escucha para este evento. Esta escucha ejecutara la 
funcion recibido () cada vez que el evento es disparado (se recibe un mensaje desde el 
codigo principal). En esta funcion, el valor de la propiedad data es agregado a una cadena 
de texto predefinida y el resultado es enviado como respuesta usando nuevamente el 
metodo postMessage 0 . 

Hagalo usted m,ismo: Compare los codigos de los Listados 14-3 y 14-4 (el codigo 
principal y el trabajador). Estudie como trabaja el procedimiento de comunicacion y 
como los mismos metodos y eventos son aplicados con este proposito en cada uno 
de los codigos. Cree los archivos necesarios para probar este ejemplo usando los 
Listados 14-1, 14-2, 14-3 y 14-4, subalos a su servidor y abra el documento HTML 
principal en su navegador. 

IMPORTANTE: Puede usar los prefijos self o this para referenciar el trabajador 
(por ejemplo, self .postMessage ()), o simplemente declare los metodos del 
modo que lo hicimos en el Listado 14-4. 

Este trabajador es, por supuesto, extremadamente elemental. Nada es realmente 
procesado. El unico proceso realizado es la construccion de una cadena de texto con el 
mensaje recibido y el envio de la misma de regreso como respuesta. Sin embargo, este 
ejemplo es util para entender como los codigos se comunican entre si y como podemos 
aprovecharesta API. 

A pesar de su simplicidad, existen algunas cosas importantes que deberemos 
considerar antes de crear nuestros trabajadores. Los mensajes son la unica forma de 
comunicarse directamente con los trabajadores. Estos mensajes, ademas, tienen que ser 
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creados usando cadenas de texto u objetos JSON debido a que los trabajadores no pueden 
recibir otro tipo de datos. Tampoco pueden acceder al documento, manipular elementos 
HTML, y no tienen acceso a funciones y variables del codigo principal. Los trabajadores son 
como codigos enlatados, solo pueden acceder a informacion recibida a traves de mensajes 
y enviar los resultados usando el mismo mecanismo. 

Detectando errores 

A pesar de las limitaciones mencionadas, los trabajadores son flexibles y poderosos. 
Podemos usar funciones, metodos Javascript predefinidos y otras API desde el interior de 
un trabajador. Considerando la complejidad que estos codigos pueden alcanzar, la API 
Web Workers incorpora un evento espedfico para informar sobre errores y retornar toda 
la informacion posible acerca de la situacion. 

error Este evento es disparado por el objeto Worker en el codigo principal cada vez que 
ocurre un error en el trabajador. Usa tres propiedades para retornar informacion: 
message, filename y lineno. La propiedad message retorna el mensaje de error. Es 
una cadena de texto que nos informa que salio mal. La propiedad filename muestra 
el nombre del archivo con el codigo que causo el error. Esto es util cuando archivos 
externos son cargados desde el trabajador, como veremos mas adelante. Finalmente, 
la propiedad lineno retorna el numero de linea en la cual el error ocurrio. 

Veamos un ejemplo de un codigo que muestra errores generados por el trabajador: 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener('click', enviar, false); 

trabaj ador=new Worker('trabaj ador.j s'); 

trabajador.addEventListener( 1 error 1 , errores, false); 

} 

function enviar(){ 

var nombre=document.getElementByld( 1 nombre').value; 
trabajador.postMessage(nombre); 

} 

function errores(e){ 

cajadatos.innerHTML= 1 ERROR: 1 +e.message* 1 <br>'; 
cajadatos.innerHTML+='Archivo: '+e.filename+ 1 <br>'; 
caj adatos.innerHTML+='Linea: '+e.1ineno; 

} 

window.addEventListener('load', iniciar, false); 


Listado 14-5. Usando el evento error. 
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El ultimo codigo presentado es similar al codigo principal del Listado 14-3. Construye el 
trabajador pero solo utiliza el evento error debido a que no queremos escuchar por 
mensajes desde el trabajador en este ejemplo, solo controlar errores. Es inutil, por 
supuesto, pero nos mostrara como los errores son retornados y que clase de informacion 
es ofrecida en estas situaciones. 

Para generar un error deliberadamente podemos llamar a una funcion no existente 
dentro del trabajador, como muestra el siguiente ejemplo: 


addEventListener('message 1 , recibido, false); 

function recibido(e){ 
prueba(); 

} 


Listado 14-6. Un trabajador que no trabaja. 

En el trabajador debemos usar el evento message para escuchar por mensajes 
provenientes del codigo principal, al igual que hicimos anteriormente, porque esta es la 
forma en la que el proceso comienza. Cuando un mensaje es recibido, la funcion 
recibido 0 es ejecutada y la funcion no existente prueba () es llamada, generando de 
este modo un error. 

Tan pronto como el error ocurre, el evento error es disparado en el codigo principal y 
la funcion errores () es llamada, mostrando en pantalla los valores de las tres 
propiedades provistas por el evento. Estudie el codigo del Listado 14-5 para entender 
como la funcion toma y procesa esta informacion. 

Hagalo usted mismo: Para este ejemplo, usamos el documento HTML y las reglas CSS 
de los Listados 14-1 y 14-2. Copie el codigo del Listado 14-5 en el archivo 
webworkers. js y el codigo del Listado 14-6 en el archivo trabajador. js. Abra la 
plantilla del Listado 14-1 en su navegador y envie desde el formulario cualquier texto 
al trabajador. El error retornado por el trabajador sera mostrado en pantalla. 

Deteniendo trabajadores 

Los trabajadores son unidades especiales de codigo que estan constantemente trabajando 
detras de escena, esperando por informacion para ser procesada. Los trabajadores seran, la 
mayoria de las veces, solo requeridos en circunstancias especificas y para propositos 
especiales. Normalmente sus servicios no seran necesarios o requeridos todo el tiempo, por lo 
que sera una buena practica detenerlos o terminar sus procesos si ya no los necesitamos. 

Con este objetivo, la API provee dos metodos diferentes: 

terminate() Este metodo detiene el trabajador desde el codigo principal. 
close() Este metodo detiene el trabajador desde dentro del trabajador mismo. 
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Cuando un trabajador es detenido, todo proceso que aun se encuentra desarrollando 
es abortado y toda tarea en el bucle de eventos es descartada. Para probar ambos 
metodos, vamos a crear una pequena aplicacion que trabaja exactamente como nuestro 
primer ejemplo, pero tambien responde a dos comandos espedficos: "cerrarl" y 
"cerrar2". Si las cadenas de texto "cerrarl" o "cerrar2" son enviadas desde el formulario, 
el trabajador sera detenido por el codigo principal o el codigo del trabajador usando 
terminate () o close () respectivamente. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 
var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

trabaj ador=new Worker('trabaj ador.j s'); 

trabajador.addEventListener('message', recibido, false); 

} 

function enviar(){ 

var nombre=document.getElementByld('nombre').value; 

if(nombre=='cerrarl'){ 
trabaj ador.terminate(); 

caj adatos.innerHTML= 1 Trabaj ador Detenido 1 ; 

}else{ 

trabajador.postMessage(nombre); 

} 

} 

function recibido(e){ 

caj adatos.innerHTML=e.data; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 14-7. Deteniendo el trabajador desde el codigo principal. 

La unica diferencia entre el nuevo codigo del Listado 14-7 y el del Listado 14-3 es la 
adicion de un condicional if para controlar la insercion del comando "cerrarl". Si este 
comando es insertado en el formulario en lugar de un nombre, el metodo terminate () 
es ejecutado y un mensaje es mostrado en pantalla indicando que el trabajador fue 
detenido. Por el otro lado, si el valor es diferente al comando esperado, el mensaje es 
enviado al trabajador. 

El codigo para el trabajador realizara una tarea similar. Si el mensaje recibido contiene 
la cadena de texto "cerrar2", el trabajador se detendra a si mismo usando el metodo 
close () o enviara una respuesta en caso contrario: 


addEventListener('message', recibido, false); 
function recibido(e){ 
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if(e.data=='cerrar2'){ 

postMessage( 1 Trabaj ador Detenido 1 ); 
close(); 

}else{ 

var respuesta= 1 Su nombre es '+e.data; 
postMessage(respuesta); 

} 


Listado 14-8. El trabajador se detiene a si mismo. 

Hagalo usted mismo: Use el mismo documento HTML y reglas CSS de los Listados 
14-1 y 14-2. Copie el codigo del Listado 14-7 dentro del archivo webworkers. j s 
y el codigo del Listado 14-8 dentro del archivo trabajador. js. Abra la plantilla 
en su navegador y usando el formulario envie el comando "cerrarl" o "cerrar2". 
Luego de ingresar uno de estos comandos el trabajador no respondera mas. 

APIs smcronas 

Los trabajadores pueden presentar limitaciones a la hora de interactuar con el documento 
principal y acceder a sus elementos, pero cuando se trata de procesamiento y funcionalidad, 
como ya mencionamos, la situation mejora considerablemente. Por ejemplo, dentro de un 
trabajador podemos usar los metodos setTimeout 0 o setinterval (), cargar informacion 
adicional desde el servidor usando XMLHttpRequest e incluso utilizar algunas APIs para crear 
codigos profesionales. Esta ultima posibilidad es la mas prometedora, pero tiene una trampa: 
deberemos aprender una implementacion diferente para cada una de las APIs a implementar. 

Cuando estudiamos algunas APIs, la implementacion presentada en esos capitulos era 
la llamada asincrona. Muchas APIs ofrecen una version asincrona y otra sincrona. Estas 
diferentes versiones de la misma API realizan las mismas tareas pero usando metodos 
especificos de acuerdo a la forma en que son procesadas. 

Las APIs asincronas son utiles cuando las operaciones a realizar consumen recursos y 
tiempo que afectan el normal funcionamiento del documento principal. Las operaciones 
asincronas son realizadas detras de escena mientras el codigo principal continua 
procesandose sin interruption. Los resultados son informados posteriormente a traves de 
eventos. Debido a que los trabajadores son por naturaleza asincronos (son procesados al 
mismo tiempo que el codigo principal) este tipo de operaciones ya no son necesarias, por 
lo que el codigo dentro de un trabajador se ejecuta de forma sincrona (incluyendo las 
APIs). 


Hagalo usted mismo: No vamos a estudiar APIs sincronas en este libro. Varias APIs 
incluyen una version sincrona, como API File o API IndexedDB, pero la mayoria de 
ellas estan aun bajo desarrollo o son inestables en este momento. Para mayor 
informacion y ejemplos, visite nuestro sitio web y siga los enlaces correspondientes 
a este capitulo. 
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Importando codigos 

Algo que vale la pena mencionar es la posibilidad de cargar archivos Javascript externos 
desde un trabajador. Un trabajador puede contenertodo el codigo necesario para realizar 
cualquier tarea que se necesite, pero debido a que varios trabajadores pueden ser creados 
para el mismo documento, existe la posibilidad de que varias partes de este codigo se 
repita entre un trabajador y otro y se vuelva asi redundante. Podemos seleccionar estos 
trozos de codigo y almacenarlos en un simple archivo que sera luego cargado por cada 
trabajador usando el nuevo metodo importScripts (): 

importScripts(archivo) Este metodo carga un archivo Javascript externo para incluir codigo 

dentro de un trabajador. El atributo archivo indica la ruta del archivo a ser incluido. 

Si alguna vez ha usado metodos en otros lenguajes de programacion, seguramente 
habra notado la similitud entre importScripts () y funciones como include () de PHP, 
por ejemplo. El codigo del archivo es incorporado dentro del trabajador y es ejecutado 
como si fuera parte de su propio codigo. 

Para usar el nuevo metodo importScripts 0 necesitamos declararlo al comienzo 
del trabajador. El codigo del trabajador no estara listo para operar hasta que estos 
archivos sean completamente cargados. 


importScripts( 1 mascodigos.j s 1 ); 

addEventListener('message 1 , recibido, false); 

function recibido(e){ 
prueba(); 

} 


Listado 14-9. Cargando codigos Javascript para el trabajador desde archivos externos. 

El codigo en el Listado 14-9 no es funcional, es solo un ejemplo de como aplicar el 
metodo importScripts 0. En esta hipotetica situacion, el archivo mascodigos. js 
conteniendo la funcion prueba () es cargado tan pronto como el trabajador es iniciado. A 
partir de este instante, la funcion prueba 0 (asi como cualquier otra funcion dentro del 
archivo mascodigos. j s) se encuentra disponible para el resto del codigo del trabajador. 

Trabajadores compartidos 

Lo que hemos visto hasta el momento es llamado Dedicated Worker (Trabajador Dedicado). 
Este tipo de trabajador solo responde al codigo desde el cual fue creado. Existe otro tipo de 
trabajador llamado Shared Worker (Trabajador Compartido), el cual responde a multiples 
documentos desde el mismo origen. Trabajar con multiples conexiones significa que 
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podemos compartir el mismo trabajador desde diferentes ventanas, pestanas o iframes, y 
podemos mantener a cada instancia actualizada y sincronizada para la construccion de 
aplicaciones complejas. 

Las conexiones son hechas a traves de puertos y estos puertos pueden ser almacenados 
en el trabajador para futuras referencias. Para trabajar con Trabajadores Compartidos y 
puertos, esta parte de la API incorpora nuevas propiedades, metodos y eventos: 

SharedWorker(codigoURL) Este constructor reemplaza al constructor previo Worker () 
usado para Trabajadores Dedicados. Como siempre, el atributo codigoURL declara la 
ruta del archivo Javascript con el codigo para el trabajador. Un segundo atributo 
opcional puede ser agregado para especificar el nombre del trabajador. 
port Cuando el objeto SharedWorker es construido, un nuevo puerto es creado para este 
documento y asignado a la propiedad port. Esta propiedad sera usada mas adelante 
para referenciar el puerto y comunicarse con el trabajador. 
connect Este es un evento especifico usado desde dentro del trabajador para controlar nuevas 
conexiones. El evento sera disparado cada vez que un documento inicia una conexion con 
el trabajador. Es util para seguir los pasos de todas las conexiones disponibles con el 
trabajador (para referenciar todos los documentos que lo estan usando). 
start() Este metodo esta disponible para los objetos MessagePort (uno de los objetos 
retornados durante la construccion del trabajador compartido) y su funcion es iniciar 
el envio de mensajes recibidos en un puerto. Luego de la construccion del objeto 
SharedWorker, este metodo debe ser llamado para iniciar la conexion. 

El constructor SharedWorker () retorna un objeto SharedWorker y un objeto 
MessagePort con el valor del puerto a traves del cual la conexion con el trabajador sera 
hecha. La comunicacion con el trabajador debe ser realizada por medio del puerto 
referenciado por la propiedad port. 

Para estudiar el funcionamiento de los Trabajadores Compartidos, tendremos que usar 
al menos dos documentos diferentes ubicados en el mismo origen, un archivo Javascript 
para cada documento y un archivo mas para el trabajador. 

La plantilla para nuestro ejemplo incluye un iframe donde se cargara el segundo 
documento HTML. Ambos, el documento principal y el documento dentro del iframe, 
compartiran el mismo trabajador. 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>WebWorkers</title> 

<link rel="stylesheet" href="webworkers.css"> 

<script src="webworkers.j s"></script> 

</head> 

<body> 

<section id="cajaformulario"> 

<form name="formulario"> 
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<p>Nombre:<br><input type="text" name="nombre" 

id="nombre"> </p > 

<pxinput type= "button" name="boton" id="boton" 

value="Enviar"></p> 

</form> 

</section> 

<section id="cajadatos"> 

<iframe id="iframe" src="iframe.html" width="500" 

height = "3 50"x/iframe> 

</section> 

:/body> 

:/html> 


Listado 14-10. Plantilla para usar Trabajadores Compartidos. 

El documento para el iframe es un simple documento HTML que incluye un elemento 
<section> para definir nuestra ya conocida cajadatos y el archivo iframe. js con el 
codigo necesario para realizar la conexion con el trabajador: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>iframe</title> 

<script src="iframe.j s"></script> 
</head> 

<body> 

< sect ion id="cajadatos"x/section> 
</body> 

</html> 


Listado 14-11. Plantilla para el iframe ( i frame. html). 

Cada uno de los documentos HTML creados incluye su propio codigo Javascript para 
iniciar la conexion con el trabajador y procesar sus respuestas. Estos codigos deben 
construir el objeto SharedWorker y usar el puerto referenciado por el valor de la 
propiedad port para enviar y recibir mensajes. Veamos primero el codigo para el 
documento principal: 


function iniciar(){ 

var boton=document.getElementByld('boton'); 
boton.addEventListener( 1 click 1 , enviar, false); 

trabaj ador=new SharedWorker( 1 trabaj ador.j s 1 ); 

trabajador.port.addEventListener('message', recibido, false); 
trabajador.port.start(); 
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function recibido(e){ 
alert(e.data); 

} 

function enviar(){ 

var nombre=document.getElementByld( 1 nombre').value; 
trabaj ador.port.postMessage(nombre); 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 14-12. Conectando desde el documento principal (webworkers. js). 

Cada uno de los documentos que necesita utilizar el trabajador compartido debera 
crear un objeto SharedWorker y establecer la conexion con el trabajador. En el codigo del 
Listado 14-12, el objeto es construido usando el archivo trabajador. js como el archivo 
que contendra al trabajador, y luego las operaciones de comunicacion son hechas a traves 
del puerto correspondiente usando la propiedad port. 

Luego de que una escucha para el evento message es agregada para escuchar por 
respuestas provenientes del trabajador, el metodo start () es llamado para iniciar el 
proceso de envio de mensajes. La conexion con el trabajador compartido no es 
establecida hasta que este metodo es ejecutado (a menos que usemos manejadores de 
eventos, como onmessage, en lugar del metodo addEventListener ()). 

La funcion enviarO es similar a ejemplos previos, excepto que esta vez la 
comunicacion es realizada a traves del valor de la propiedad port. 

El codigo del iframe se asemeja al principal: 


function iniciar(){ 

trabaj ador=new SharedWorker('trabaj ador.j s'); 

trabajador.port.addEventListener('message 1 , recibido, false); 

trabaj ador.port.start(); 

} 

function recibido(e){ 

var caj adatos=document.getElementByld('caj adatos'); 
caj adatos.innerHTML=e.data; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 14-13. Conectando desde el iframe (i frame. j s). 

En ambos codigos, el objeto SharedWorker es construido referenciando al mismo 
archivo (trabajador.js), y la conexion es establecida usando la propiedad port 
(aunque a traves de puertos diferentes). La unica diferencia entre el codigo para el 
documento principal y el codigo para el iframe es como la respuesta del trabajador sera 
procesada. En el documento principal, la funcion recibido () muestra una ventana de 
alerta (ver Listado 14-12), mientras que dentro del iframe la respuesta es mostrada como 
un simple texto dentro del elemento cajadatos (ver Listado 14-13). 
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Es momento de ver como el trabajador compartido administra cada conexion y envia 
mensajes en respuesta al documento apropiado. Recuerde que solo existe un trabajador 
para ambos documentos (precisamente por esto se llama Trabajador Compartido). Debido 
a esto, cada solicitud de conexion recibida por el trabajador tiene que ser diferenciada y 
almacenada para futuras referencias. Vamos a grabar estas referencias a los puertos de 
cada documento en un array llamado puertos: 


puertos=new Array(); 

addEventListener( 1 connect 1 , conectar, false); 

function conectar(e){ 

puertos.push(e.ports [0]); 
e.ports [0] .onmessage=enviar; 

} 

function enviar(e){ 

for(f=0; f < puertos.length; f++){ 

puertos [f] .postMessage( 1 Su nombre es '+e.data); 

} 


Listado 14-14. Codigo para el trabajador compartido ( trabajador. js). 

El procedimiento es similar al usado para Trabajadores Dedicados. Esta vez solo 
tenemos que considerar a que documento especifico vamos a responder, porque varios 
pueden estar conectados con el trabajador al mismo tiempo. Con este proposito, el 
evento connect provee el array ports con el valor del nuevo puerto creado para la 
conexion que estamos estableciendo (el array contiene solo este valor localizado en el 
indice 0). 

Cada vez que un codigo solicita una nueva conexion al trabajador, el evento connect 
es disparado. En el codigo del Listado 14-14, este evento llama a la funcion conectar (). 
En esta funcion realizamos dos operaciones: primero, el valor del puerto es tornado de la 
propiedad ports (indice 0) y almacenado en el array puertos (inicializado al comienzo 
del codigo del trabajador). Y segundo, el manejador de eventos onmessage es registrado 
para este puerto en particular y la funcion enviar () es declarada como la responsable de 
atender los mensajes recibidos. 

Como resultado, cada vez que un mensaje es enviado hacia el trabajador desde el 
codigo principal, sin importar desde que documento, la funcion enviar () en el 
trabajador es ejecutada. En esta funcion usamos un bucle for para extraer del array 
puertos todos los puertos abiertos para este trabajador y enviar un mensaje a cada 
documento conectado. El proceso es exactamente como en los Trabajadores Dedicados, 
pero esta vez varios documentos son respondidos en lugar de uno solo. 
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Hagalo usted mismo: Para probar este ejemplo, tendra que crear varios archivos y 
subirlos al servidor. Cree un archivo HTML con la plantilla del Listado 14-10 y el 
nombre que desee. Esta plantilla usara el mismo archivo webworkers.css usado a 
lo largo del capftulo. Cree tambien el archivo webworkers. j s con el codigo del 
Listado 14-12, y el archivo iframe.html como la fuente del iframe con el codigo del 
Listado 14-11. Tambien necesitara crear el archivo trabajador. js conteniendo el 
codigo del trabajador del Listado 14-14. Una vez que todos estos archivos son 
generados y subidos al servidor, abra el primer documento en su navegador. Use el 
formulario para enviar un mensaje al trabajador y ver como ambos documentos (el 
documento principal y el documento dentro del iframe) procesan la respuesta. 

IMPORTANTE: En el momenta de escribir estas lineas, los Trabajadores Compartidos 
solo funcionan en navegadores basados en el motor WebKit, como Google Chrome y 
Safari. 


14.2 Referenda rapida 

La API Web Workers incorpora la capacidad de multiprocesamiento a Javascript. Es la API 
que nos permite procesar codigos detras de escena sin interrumpir el normal 
funcionamiento del codigo del documento principal. 

Trabajadores 

Dos clases diferentes de trabajadores son ofrecidos: Trabajadores Dedicados (Dedicated 
Workers) y Trabajadores Compartidos (Shared Workers). Ambos comparten los siguientes 
metodos y eventos: 

postMessage(mensaje) Este metodo envia un mensaje al trabajador, el codigo principal o 
el puerto correspondiente. El atributo mensa j e es la cadena de texto o el objeto JSON 
a ser enviado. 

terminate() Este metodo detiene el trabajador desde el codigo principal. 
close() Este metodo detiene al trabajador desde dentro del trabajador. 
importScripts(archivo) Este metodo carga un archivo Javascript externo para incorporar 
codigo al trabajador. El atributo archivo indica la ruta del archivo a ser incluido. 
message Este evento es disparado cuando un mensaje es enviado al codigo. Puede ser usado 
en el trabajador para escuchar por mensajes provenientes del codigo principal o viceversa. 
error Este evento es disparado cuando ocurre un error en el trabajador. Es usado en el 
codigo principal para controlar por errores en el trabajador. Retorna informacion por 
medio de tres propiedades: message, filename y lineno. La propiedad message 
representa el mensaje de error, la propiedad filename muestra el nombre del archivo 
con el codigo que causo el error, y la propiedad lineno retorna el numero de linea en 
la cual ocurrio el error. 
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Trabajadores dedicados (Dedicated Workers) 

Los Trabajadores Dedicados tienen su propio constructor: 

Worker(codigoURL) Este constructor retorna un objeto Worker. El atributo codigoURL es 
la ruta del archivo conteniendo el trabajador. 

Trabajadores compartidos (Shared Workers) 

Debido a la naturaleza de los Trabajadores Compartidos, la API ofrece algunos metodos, 

propiedades y eventos especlficos: 

SharedWorker(codigoURL) Este constructor retorna un objeto SharedWorker. El atributo 
codigoURL es la ruta del archivo conteniendo el trabajador compartido. Un segundo 
atributo opcional puede ser especificado para declarar el nombre del trabajador. 

port Esta propiedad retorna el valor del puerto de la conexion con el trabajador 
compartido. 

connect Este evento es disparado en el trabajador compartido cuando una nueva 
conexion es solicitada desde un documento. 

start() Este metodo inicia el envio de mensajes. Es usado para comenzar la conexion con el 
trabajador compartido. 
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15.1 Interface History 

Lo que en HTML5 normalmente llamamos API History es en realidad solo una mejora de 
una vieja API que nunca tuvo una implementacion oficial pero fue soportada por 
navegadores durante anos. Esta vieja API estaba compuesta solo por un pequeno grupo 
de metodos y propiedades, algunos de ellos parte del objeto History. La nueva API History 
es precisamente una mejora de este objeto y fue incluida oficialmente en la especificacion 
HTML como la interface History. Esta interface combina todos los viejos metodos y 
propiedades con algunos nuevos para trabajar y modificar el historial del navegador de 
acuerdo a nuestras necesidades. 

Navegando la Web 

El historial del navegador es una lista de todas las paginas web (URLs) visitadas por el 
usuario durante una sesion. Es lo que hace la navegacion posible. Usando los botones de 
navegacion a la izquierda de la barra de navegacion de todo navegador podemos ir hacia 
atras o hacia adelante en este lista y visitar documentos que vimos anteriormente. Esta 
lista es construida con URLs reales generadas por los sitios web, incluidas en cada enlace 
dentro de sus documentos. Con las flechas del navegador podemos cargar la pagina web 
que fue visitada anteriormente o volver a la ultima. 

A pesar de la practicidad de los botones de navegacion, a veces es util navegar a traves 
del historial desde dentro del documento. Para simular las flechas de navegacion desde 
Javascript, siempre contamos con los siguientes metodos y propiedades: 

back() Este metodo retrocede un paso en el historial (imitando la flecha izquierda del 
navegador). 

forward() Este metodo avanza un paso en el historial (imitando la flecha derecha del 
navegador). 

go(pasos) Este metodo avanza o retrocede en el historial la cantidad de pasos especificados. 
El atributo pasos puede ser un valor negativo o positivo de acuerdo a la direccion hacia 
donde queremos ir. 

length Esta propiedad retorna el numero de entradas en el historial (el total de URLs en la 
lista). 
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Estos metodos y propiedades deben ser declarados como parte del objeto History, con 
una expresion como history.back (). Tambien podemos usar el objeto Window para 
referenciar la ventana, pero esto no es necesario. Por ejemplo, si queremos regresar a la 
pagina anterior en el historial podemos usar los codigos window.history.back() o 
window.history.go(-1). 

IMPORTANTE: Esta parte de la API es conocida y utilizada por la mayoria de los 
disenadores y programadores web estos dias. No vamos a estudiar ningun codigo de 
ejemplo sobre estos metodos, pero puede visitar nuestro sitio web y seguir los 
enlaces correspondientes a este capitulo si necesita mayor informacion al respecto. 

Nuevos metodos 

Cuando el uso del objeto XMLHttpRequest se volvio estandar y las aplicaciones Ajax se 
convirtieron en un exito extraordinario, la forma en la que los usuarios navegaban y 
accedian a los documentos cambio para siempre. Ahora es comun programar pequenos 
codigos para obtener informacion desde el servidor y mostrarla dentro del documento 
actual, sin actualizar el contenido completo de la ventana o cargar un nuevo documento. 
Los usuarios interaction con sitios web modernos y aplicaciones desde la misma URL, 
recibiendo informacion, ingresando datos y obteniendo resultados de procesos siempre 
desde la misma pagina web. La web ha comenzado a emular aplicaciones de escritorio. 

Sin embargo, la forma en la que los navegadores siguen los pasos del usuario es a 
traves de URLs. URLs son, de hecho, los datos dentro de la lista de navegacion, las 
direcciones que indican donde el usuario se encuentra actualmente. Debido a que las 
nuevas aplicaciones web evitan el uso de URLs para apuntar a la ubicacion del usuario 
dentro de la aplicacion, pronto se volvio evidente que pasos importantes en el proceso se 
perdfan sin dejar rastro alguno. Los usuarios podfan actualizar datos en una pagina web 
docenas de veces y aun asi ningun rastro de actividad quedaba almacenado en el historial 
del navegador para indicar los pasos seguidos. 

Nuevos metodos y propiedades fueron incorporados a la ya existente History API con 
la intencion de modificar manualmente la URL en la barra de localizacion asi como 
tambien el historial del navegador simplemente usando codigo Javascript. Desde ahora 
tenemos la posibilidad de agregar URLs falsas al historial y de este modo mantener control 
sobre la actividad del usuario. 

pushState(estado, ti'tulo, url) Este metodo crea una nueva entrada en el historial. El 
atributo estado declara un valor para el estado de la entrada. Es util para identificar la 
entrada mas adelante y puede ser especificado como una cadena de texto o un objeto 
JSON. El atributo titulo es el titulo de la entrada, y el atributo url es la URL para la 
entrada que estamos generando en el historial (este valor reemplazara a la URL que 
aparece actualmente en la barra de localizacion). 
replaceState(estado, titulo, url) Este metodo trabaja exactamente igual a pushstateO , 
pero no genera una nueva entrada. En su lugar, reemplaza la informacion de la actual. 
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state Esta propiedad retorna el valor del estado de la entrada actual. Este valor sera null 
(nulo) a menos que haya sido declarado por alguno de los metodos anteriores usando 
el atributo estado. 

URLs falsas 

Las URLs generadas usando metodos como pushstate () son URLs falsas en el sentido de 
que los navegadores nunca controlan su validez y la existencia del documento al que 
supuestamente apuntan. Depende de nosotros asegurarnos que estas URLs falsas sean en 
realidad validas y utiles. 

Para crear una nueva entrada en el historial del navegador y cambiar la direccion URL 
dentro de la barra de navegacion, necesitamos usar el metodo pushstate (). Veamos un 
ejemplo de como trabaja: 


<!DOCTYPE html> 

<html lang="es"> 

<title>History API</title> 

<link rel="stylesheet" href="history.css"> 
<script src="history.js"></script> 

</head> 

<body> 

<section id="contenido"> 

Este contenido nunca es actualizado<br> 
<span id="url">pagina 2</span> 

</section> 

<aside id="cajadatos"x/aside> 

</body> 

</html> 


Listado 15-1. Plantilla basica para aplicar la API History. 

En el Listado 15-1 presentamos un codigo HTML con los elementos basicos necesarios 
para probar esta API. Con este proposito, colocamos contenido permanente dentro de un 
elemento <section> identificado como contenido, un texto que se convertira en un 
link para generar la segunda pagina virtual, y nuestra ya acostumbrada cajadatos para 
mostrar el contenido alternative. 

Los siguientes son los estilos basicos necesarios para diferenciar las partes que 
componen la plantilla: 


#contenido{ 
float: left; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 


325 



El gran libro de HTML5, CSS3 y Javascript 


#cajadatos{ 
float: left; 
width: 500px; 
margin-left: 2 0px; 
padding: 2 Opx; 
border: lpx solid #999999; 

} 

#contenido span{ 
color: #000OFF; 
cursor: pointer; 

} 


Listado 15-2. Estilos para las cajas y los elementos <span> (history, css). 

Lo que vamos a hacer en este ejemplo es agregar una nueva entrada con el metodo 
pushstate () y actualizar el contenido sin recargar la pagina o cargar un nuevo documento. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 

url=document.getElementByld('url'); 

url.addEventListener( 1 click 1 , cambiar, false); 

} 

function cambiar(){ 

cajadatos.innerHTML= 1 La URL es pagina2'; 

window.history.pushstate(null, null, 'pagina2.html'); 

} 

window.addEventListener('load', iniciar, false); 


Listado 15-3. Generando una nueva URL y nuevo contenido (history, js). 

En la funcion iniciar () del Listado 15-3, creamos la referencia apropiada para el 
elemento cajadatos y agregamos una escucha para el evento click al elemento 
<span>. Cada vez que el usuario hace clic sobre el texto dentro de <span>, la funcion 
cambiar () es llamada. 

La funcion cambiar () realiza dos tareas: actualiza el contenido de la pagina con 
nueva informacion e inserta una nueva URL al historial. Luego de que esta funcion es 
ejecutada, cajadatos muestra el texto "La URL es pagina2" y la URL del documento 
principal en la barra de localizacion es reemplazada por la URL falsa "pagina2.html". 

Los atributos estado y titulo para el metodo pushstate () esta vez fueron 
declarados como null (nulo). El atributo titulo no esta siendo usado en este momento 
por ningun navegador y siempre lo declararemos como null, pero el atributo estado, 
por el contrario, es util y sera aprovechado en proximos ejemplos. 
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Subalos a su servidor y abra el archivo HTML en su navegador. Haga clic sobre el 
texto "pagina 2" y compruebe que la URL en la barra de localization cambio por 
la URL falsa generada por el codigo. 

Siguiendo la pista 

Lo que hemos hecho hasta ahora es solo una manipulacion del historial de la sesion. Le hicimos 
creer al navegador que el usuario visito una URL que, a este punto, ni siquiera existe. Luego de 
que el usuario hace clic en el enlace "pagina 2", la URL falsa "pagina2.html" es mostrada en la 
barra de localization y nuevo contenido es insertado en el elemento cajadatos, todo sin 
recargar la pagina web o cargar una nueva. Es un truco interesante pero no realmente util. El 
navegador todavfa no considera a la nueva URL como un documento real. Si intenta retroceder 
o avanzar en el historial usando los botones de navegacion del navegador, la URL cambia entre 
la que generamos artificialmente y la URL del documento principal, pero el contenido del 
documento no es modificado. Necesitamos detectar cuando las URLs falsas son visitadas 
nuevamente y realizar las modificaciones apropiadas al documento para mostrar el estado 
correspondiente a la URL actual. 

Previamente mencionamos la existencia de la propiedad state. El valor de esta propiedad 
es declarado durante la generation de la nueva URL y es usado para identificar cual es la 
direction web actual. Para trabajar con esta propiedad, la API provee un nuevo evento: 

popstate Este evento es disparado cuando una URL es visitada nuevamente o un 
documento es cargado. Provee la propiedad state con el valor del estado declarado 
cuando la URLfue generada con los metodos pushstateO o replaceStateO . Este 
valor es null (nulo) si la URL es real, a menos que lo hayamos cambiado antes usando 
replaceState (), como veremos en el siguiente ejemplo. 

En el proximo codigo mejoraremos el ejemplo previo implementando el evento 
popstate y el metodo replaceStateO para detectar cual URL el usuario esta 
solicitando a cada momento. 


function iniciar0{ 

caj adatos=document.getElementByld('caj adatos'); 

url=document.getElementByld('url'); 

url.addEventListener( 1 click 1 , cambiar, false); 

window.addEventListener('popstate', nuevaurl ,false); 
window.history.replaceState(1, null); 

} 

function cambiar(){ 
mostrar(2); 

window.history.pushState(2, null, 'pagina2.html'); 

} 

function nuevaurl(e){ 
mostrar(e.state); 

} 
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function mostrar(actual){ 

cajadatos.innerHTML='La URL es pagina '+actual; 

} 

window.addEventListener('load', iniciar, false); 


Listado 15-4. Controlando la ubicacion del usuario (history, js). 

Debemos hacer dos cosas en nuestra aplicacion para tener control absoluto sobre la 
situacion. Primero, tenemos que declarar un valor de estado para cada URL que vamos a 
utilizar, las falsas y las reales. Y segundo, el contenido del documento debe ser actualizado 
de acuerdo a la URL actual. 

En la funcion iniciar () del Listado 15-4, una escucha fue agregada para el evento 
popstate. Esta escucha llamara a la funcion nuevaurlO cada vez que una URL es 
visitada nuevamente. La funcion simplemente actualizara el contenido de la cajadatos 
con un mensaje indicando cual es la pagina actual. Lo que hace es tomar el valor de la 
propiedad state y enviarlo a la funcion mostrar () para mostrarlo en pantalla. 

Esto funcionara para cada URL falsa, pero como explicamos antes, las URLs reales no 
tienen un valor de estado por defecto. Usando el metodo replaceStateO al final de la 
funcion iniciar () cambiamos la informacion de la entrada actual (la URL real del 
documento principal) y declaramos el valor 1 para su estado. Ahora, cada vez que el usuario 
visite nuevamente el documento principal podremos detectarlo comprobando este valor. 

La funcion cambiar() es la misma que antes, excepto que esta vez usa la funcion 
mostrar () para actualizar el contenido del documento y declarar el valor 2 para el 
estado de la URL falsa. 

La aplicacion trabaja de la siguiente forma: cuando el usuario hace clic sobre el enlace 
"pagina 2", el mensaje "La URL es pagina 2" es mostrado en pantalla y la URL en la barra de 
navegacion es reemplazada por "pagina2.html" (incluyendo la ruta completa, por supuesto). 
Esto es lo que habiamos hecho hasta el momento, pero aqui es donde las cosas se vuelven 
interesantes. Si el usuario presiona la flecha izquierda en la barra de navegacion del 
navegador, la URL dentro de la barra de localizacion sera reemplazada por la que se 
encuentra en la posicion anterior del historial (esta es la URL real de nuestro documento) y 
el evento popstate sera disparado. Este evento llama a la funcion nuevaurl () que lee el 
valor de la propiedad state y lo envfa a la funcion mostrar (). Ahora el valor del estado es 
1 (el valor que declaramos para esta URL usando el metodo repiacestate ()) y el mensaje 
mostrado en la pantalla sera "La URL es pagina 1". Si el usuario vuelve a visitar la URL falsa 
usando la flecha derecha en la barra de navegacion, el valor del estado sera 2 y el mensaje 
mostrado en pantalla sera nuevamente "La URLes pagina 2". 

Como puede ver, el valor de la propiedad state es cualquier valor que desee usar 
para controlar cual es la URL actual y adaptar el contenido del documento a la misma. 

Hagalo usted mismo: Use los archivos con los codigos de los Listados 15-1 y 15-2 
para el documento HTML y los estilos CSS. Copie el codigo del Listado 15-4 dentro 
del archivo history, js y suba todos los archivos a su servidor. Abra la plantilla 
HTML en su navegador y haga clic sobre el texto "pagina 2". La nueva URL sera 
mostrada y el contenido de cajadatos cambiara de acuerdo a la URL 
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correspondiente. Presione las flechas izquierda y derecha en el navegador para 
moverse a traves del historial y ver como la URL cambia y como el contenido del 
documento es actualizado de acuerdo a la URL seleccionada (el contenido es 
mostrado en pantalla de acuerdo al valor del estado actual). 

IMPORTANTE: La URL "pagina2.html" generada con el metodo pushstateO en 
los ejemplos previos es considerada falsa, pero deberia ser real. El proposito de 
esta API no es crear URLs falsas sino proveer a los programadores la alternativa de 
registrar la actividad del usuario en el historial para poder volver a un estado 
anterior toda vez que sea requerido (incluso luego de que el navegador fue 
cerrado). Usted mismo debera asegurarse de que el codigo en su servidor retorna 
el apropiado contenido por cada una de las URLs usadas por la aplicacion (las reales 
y las falsas). 

Ejemplo real 

La siguiente es una aplicacion practica. Vamos a usar la API History y todos los metodos 
estudiados anteriormente para cargar un grupo de cuatro imagenes desde el mismo 
documento. Cada imagen es asociada a una URL falsa que podra ser usada mas adelante 
para retornar una imagen especifica desde el servidor. 

El documento principal es cargado con una imagen por defecto. Esta imagen estara 
asociada al primero de cuatro enlaces que son parte del contenido permanente del 
documento. Todos estos enlaces apuntaran a URLs falsas referenciando un estado, no un 
documento real (incluyendo el enlace para el documento principal que sera cambiado por 
"paginal.html"). Todo el proceso tendra mas sentido pronto, por ahora veamos el codigo 
de la plantilla HTML: 


<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>History API</title> 

<link rel="stylesheet" href="history.css"> 

<script src="history.js"></script> 

</head> 

<body> 

<section id="contenido"> 

Este contenido nunca es actualizado <br> 

<span id="urll">imagen l</span> - 
<span id="url2">imagen 2</span> - 
<span id="url3">imagen 3</span> - 
<span id="url4">imagen 4</span> - 
</section> 

<aside id="cajadatos"> 

<img id="imagen" src="http://www.minkbooks.com/content/ 

monsterl.gif"> 
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</aside> 

</body> 

</html> 


Listado 15-5. Plantilla para una aplicacion "real". 

La unica diferencia significativa entre esta nueva aplicacion y la anterior es el numero de 
enlaces y la cantidad de URLs que estamos manejando. En el codigo del Listado 15-4, teniamos 
dos estados, el estado 1 correspondiente al documento principal y el estado 2 para la URL falsa 
"pagina2.html" generada por el metodo pushstate 0 . En este caso, debemos automatizar el 
proceso y generar un total de cuatro URLs falsas correspondientes a cada imagen disponible. 


function iniciar(){ 
forfvar f=1;f<5;f++){ 

url=document.getElementByld('url'+f); 
url.addEventListener( 1 click 1 , function(x){ 
return function(){ cambiar(x);} 

}(f), false); 

} 


window.addEventListener('popstate 1 , nuevaurl ,false); 
window.history.replaceState(1, null, 'paginal.html'); 

} 

function cambiar(pagina){ 
mostrar(pagina); 

window.history.pushstate(pagina, null, 1 pagina'+pagina+ 1 .html 1 ); 

} 

function nuevaurl (e){ 
mostrar(e.state) ; 

} 

function mostrar(actual){ 
if(actual!=null){ 

imagen=document.getElementByld( 1 imagen'); 

imagen.src='http://www.minkbooks.com/content/monster' + 

actual + '.gif'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 15-6. Manipulando el historial (history. js). 

Como se puede apreciar, estamos usando las mismas funciones pero con algunos 
cambios importantes. Primero, el metodo replaceState () en la funcion iniciar () tiene 
el atributo url declarado como "paginal.html". Decidimos programar nuestra aplicacion de 
este modo, declarando el estado del documento principal como 1 y cambiando su URL por 
"paginal.html" (independientemente de la URL real del documento). De este modo sera 
simple pasar de un estado a otro, siempre usando el mismo formato y los valores de la 
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propiedad state para construir todas las URL utilizadas por la aplicacion. Puede ver este 
procedimiento en la practica estudiando la funcion cambiarO. Cada vez que el usuario 
hace clic en uno de los enlaces de la plantilla, esta funcion es ejecutada y la URL falsa es 
construida con el valor de la variable pagina y agregada al historial de la sesion. El valor 
recibido por esta funcion fue previamente declarado en el bucle for al comienzo de la 
funcion iniciarO. Este valor es declarado como 1 para el enlace "pagina 1", 2 para el 
enlace "pagina 2", y asi sucesivamente. 

Cada vez que una URL es visitada, la funcion mostrar () es ejecutada para actualizar 
el contenido (la imagen) de acuerdo a la misma. Debido a que el evento popstate a veces 
es disparado en circunstancias en las que el valor de la propiedad state es null (como 
cuando el documento es cargado por primera vez), controlamos el valor recibido por la 
funcion mostrar () antes de continuar. Si este valor es diferente de null, significa que 
la propiedad state fue definida para esa URL, por lo tanto la imagen correspondiente con 
ese estado es mostrada en pantalla. 

Las imagenes usadas para este ejemplo fueron nombradas monsterl.gif, monster2.gif, 
monster3.gif y monster4.gif, siguiendo el mismo orden de los valores de la propiedad 
state. Asi, usando este valor podemos seleccionar la imagen a ser mostrada. Sin 
embargo, recuerde que los valores usados pueden ser cualquiera que usted necesite y el 
proceso para crear URLs falsas y contenido asociado debe ser desarrollado de acuerdo con 
las necesidades de su aplicacion. 

Tambien recuerde que los usuarios deberian poder regresar a cualquiera de las URLs 
generadas por la aplicacion y ver el contenido correspondiente en la pantalla cada vez que 
lo deseen. Usted debe preparar su servidor para procesar estas URLs de modo que cada 
estado de la aplicacion (cada URL falsa) este disponible y sea siempre accesible. Por 
ejemplo, si un usuario abre una nueva ventana y escribe la URL "pagina2.html" en la barra 
de navegacion, el servidor deberia retornar el documento principal conteniendo la imagen 
"monster2.gif", correspondiente a esta URL, y no simplemente la plantilla del Listado 15-5. 
La idea detras de esta API es proveer una alternativa para que los usuarios puedan 
regresar a cualquier estado previo, en cualquier momento; algo que solo podemos lograr 
volviendo validas a las URLs falsas. 

IMPORTANTE: El bucle for usado en el codigo del Listado 15-6 para agregar una 
escucha para el evento click a cada elemento <span> en el documento 
aprovecha una tecnica Javascript que nos permite enviar valores reales a una 
funcion. Para enviar un valor a la funcion que manejara el evento en un metodo 
addEventListener (), debemos declarar el valor real. Si en su lugar enviamos 
una variable, lo que realmente es enviado no es el valor de la variable sino una 
referencia a la misma. Por lo tanto, en este caso, para enviar el valor actual de la 
variable f en el bucle for tenemos que usar varias funciones anonimas. La 
primera funcion es ejecutada en el momento en el que el metodo 
addEventListener () es declarado. Esta funcion recibe el valor actual de la 
variable f (vea los parentesis al final) y almacena este valor en la variable x. 
Luego, la funcion retorna una segunda funcion con el valor de la variable x. Esta 
segunda funcion es la que sera ejecutada con el valor correspondiente cuando el 
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evento es disparado. Esta es una tecnica compleja que debera aprender junto 
con otras si desea crear codigos Javascript profesionales. Para obtener mas 
informacion sobre este tema, visite nuestro sitio web y siga los enlaces 
correspondientes a este capitulo. 

Hagalo usted mismo: Para probar el ultimo ejemplo use el mismo documento 
HTML del Listado 15-5 con los estilos CSS del Listado 15-2. Copie el codigo del 
Listado 15-6 dentro del archivo history, js y suba los archivos a su servidor. Abra 
la plantilla en su navegador y haga clic en los enlaces. Navegue a traves de las URLs 
seleccionadas usando los botones de navegacion del navegador. Las imagenes en la 
pantalla cambiaran de acuerdo a la URL en la barra de localizacion. 


15.2 Referencia rapida 

API History nos permite manipular el historial de la sesion en el navegador para seguir los 
pasos de los usuarios dentro de la aplicacion. Esta API es incluida en la especificacion oficial 
como la interface History. Esta interface combina metodos y propiedades, nuevos y viejos. 

length Esta propiedad retorna el numero total de entradas en el historial. 
state Esta propiedad retorna el valor del estado para la URL actual. 

go(pasos) Este metodo avanza o retrocede en el historial de navegacion de acuerdo al 
valor del atributo paso. Este valor puede ser negativo o positivo dependiendo de la 
direction de navegacion deseada. 
back() Este metodo carga la URL anterior desde el historial. 
forward() Este metodo carga la URL siguiente desde el historial. 

pushState(estado, tftulo, url) Este metodo inserta nuevos datos en el historial. El atributo 
estado es el valor del estado que queremos otorgar a esta nueva entrada. El atributo 
titulo es el tftulo de la entrada. Y el atributo url es la nueva URL que queremos 
generaren el historial. 

replaceState(estado, tftulo, url) Este metodo modifica la entrada actual. El atributo estado 
es el valor del estado que queremos otorgar a la entrada actual. El atributo titulo es el 
tftulo de la entrada. Y el atributo url es la nueva URL que queremos asignar a la entrada 
actual. 

popstate Este evento es disparado en determinadas circunstancias para informar el valor 
del estado actual. 
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16.1 Cache 

Los dias de trabajar desconectado han llegado a su fin. Debido a que este capitulo presenta API 
Offline (la API para trabajar desconectados), esta declaracion puede resultar contradictoria, 
pero analicemoslo por un momento. Hemos trabajado desconectados casi toda nuestra vida. 
Las aplicaciones de escritorio fueron nuestra herramienta primaria de produccion. Y ahora, de 
repente, la web ha emergido como la nueva plataforma de trabajo. Aplicaciones en linea se 
vuelven mas y mas complejas, y HTML5 esta haciendo la batalla entre estos dos mundos mas 
dura que nunca. Bases de datos, acceso a archivos, almacenamiento, herramientas graficas, 
edicion de imagen y video, y multiprocesamiento son, entre otras, caracteristicas esenciales 
para una aplicacion que ahora se encuentran disponibles en la web. Nuestra actividad diaria 
gira cada vez mas en torno a la web, y nuestro ambito de produccion se encuentra en la red. 
Los dias de trabajar desconectados son historia. 

Sin embargo, a medida que esta transicion continua, las aplicaciones web se vuelven 
mas sofisticadas, requiriendo archivos mas grandes y mayor tiempo de descarga. Para 
cuando las aplicaciones en la web reemplacen definitivamente a las aplicaciones de 
escritorio, trabajar en linea sera imposible. Los usuarios no podran descargar varios 
megabytes de archivos cada vez que necesiten usar una aplicacion y no podran contar con 
tener conexion a la red disponible todo el tiempo. Las aplicaciones que no requieren 
Internet pronto desapareceran, pero bajo las actuales circunstancias las aplicaciones en 
linea estan destinadas a fracasar. 

Offline API llega para ayudarnos a resolver este dilema. Basicamente, esta API provee 
la alternativa de almacenar las aplicaciones y archivos web en el ordenador del usuario 
para uso futuro. Un solo acceso es suficiente para descargar todos los archivos requeridos 
y ejecutar la aplicacion en todo momento, con o sin conexion a Internet. Una vez que los 
archivos son descargados, la aplicacion funciona en el navegador usando este cache (los 
archivos almacenados en el ordenador), como lo haria una aplicacion de escritorio, 
independientemente de lo que pase con el servidor o la conexion. 

El archivo manifiesto 

Una aplicacion web o un sitio web sofisticado consistira en varios archivos, pero no todos 
ellos seran requeridos para ejecutar la aplicacion y tampoco sera necesario almacenarlos a 
todos en el ordenador del usuario. La API asigna un archivo especifico para declarar la lista 
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de archivos que la aplicacion necesita para trabajar sin conexion. Este es solo un archivo 
de texto llamado "manifiesto" (manifest), conteniendo una lista de URLs que apuntan a la 
ubicacion de los archivos requeridos. El manifiesto puede ser creado con cualquier editor 
de texto, y debe comenzar con la linea cache manifest, como en el siguiente ejemplo: 


CACHE MANIFEST 
cache.html 
cache.css 


Listado 16-1. Archivo manifiesto. 

El manifiesto debera ser grabado con la extension .manifest y debera incluir debajo 
de cache manifest todos los archivos que la aplicacion necesita para trabajar desde el 
ordenador del usuario sin solicitar ningun recurso externo. En nuestro ejemplo, tenemos 
el archivo cache.html como el documento principal de la aplicacion, el archivo 
cache .css con los estilos CSS y el archivo cache. j s conteniendo los codigos Javascript. 

Categories 

Del mismo modo que necesitamos especificar los archivos requeridos para trabajar 
desconectados, tambien podriamos necesitar declarar explicitamente aquellos que se 
encuentran solo disponibles cuando estamos conectados. Este podrfa ser el caso para 
algunas partes de la aplicacion que solo seran utiles cuando tenemos acceso a Internet 
(por ejemplo, una sala de chat para consultas). 

Para identificar los tipos de archivos listados en el archivo manifiesto, la API introduce 
tres categorias: 

CACHE Esta es la categorfa por defecto. Todos los archivos en esta categorfa seran 
almacenados en el ordenador del usuario para uso futuro. 

NETWORK Esta categorfa es considerada como una lista de aprobacion; todos los archivos 
en su interior solo se encuentran disponibles en linea. 

FALLBACK Esta categorfa es para archivos que podria ser util obtener del servidor cuando 
estamos conectados, pero que pueden ser reemplazados por una version en el cache. 
Si el navegador detecta que hay conexion, intentara usar el archivo original en el 
servidor, en caso contrario, sera usado en su lugar el alternative ubicado en el 
ordenador del usuario. 

Usando categorias, nuestro archivo manifiesto podrfa ser similar al siguiente: 


CACHE MANIFEST 
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CACHE: 
cache.html 
cache.css 
cache.j s 

NETWORK: 
chat.html 


FALLBACK: 

noticias.html sinnoticias.html 


Listado 16-2. Declarando archivos por categoria. 

En el nuevo archivo manifiesto del Listado 16-2, los archivos son listados bajo la 
categoria correspondiente. Los tres archivos en la categoria cache seran descargados, 
almacenados en el ordenador del usuario y usados para esta aplicacion de ahora en mas (a 
menos que especifiquemos algo diferente mas adelante). El archivo chat.html 
especificado en la categoria network estara solo disponible cuando el navegador tenga 
acceso a Internet. Y por ultimo, el archivo noticias.html dentro de la categoria 
fallback sera accedido desde el servidor cuando exista conexion a la red, o reemplazado 
por el archivo sinnoticias.html ubicado en el ordenador del usuario en caso 
contrario. Del mismo modo que los archivos dentro de la categoria cache, el archivo 
sinnoticias.html es incluido en el cache y por lo tanto almacenado en el ordenador 
del usuario para estar disponible cuando sea requerido. 

La categoria fallback es util no solo para reemplazar archivos individuales sino 
tambien para proveer alternativas para directories completos. Por ejemplo, la linea / 
sinconexion.html reemplazara cualquier archivo que no este disponible en el cache 
por el archivo sinconexion.html. Esta es una forma simple de desviar a los usuarios 
hacia un documento que les recomienda conectarse a Internet cuando intentan acceder a 
una parte de la aplicacion que no esta disponible sin conexion. 

Comentarios 

Los comentarios pueden ser agregados al manifiesto usando el simbolo # (uno por cada 
linea de comentario). Debido a que la lista de archivos es ordenada en categorias, puede 
parecer inutil el agregado de comentarios, pero son importantes, especialmente a la hora de 
realizar actualizaciones en el cache (descargar nuevas versiones de archivos). El archivo 
manifiesto no solo declara que archivos seran incluidos en el cache, sino cuando. Cada vez 
que los archivos de la aplicacion son actualizados, no hay forma en la que el navegador 
pueda saberlo excepto a traves del archivo manifiesto. Si los archivos actualizados son los 
mismos y ninguno fue agregado a la lista, el archivo manifiesto lucira exactamente igual que 
antes, entonces el navegador no podra reconocer la diferencia y seguira usando los archivos 
viejos que ya se encuentran en el cache. Sin embargo, podemos forzar al navegador a 
descargar nuevamente los archivos de la aplicacion indicando la existencia de una 
actualization por medio del agregado de comentarios. Normalmente, un solo comentario 


335 




El gran libro de HTML5, CSS3 y Javascript 


con la fecha de la ultima actualizacion (o cualquier otro dato) sera suficiente, como es 
mostrado en el siguiente ejemplo: 


CACHE MANIFEST 


CACHE: 
cache.html 
cache.css 
cache.j s 

NETWORK: 
chat.html 

FALLBACK: 

noticias.html sinnoticias.html 
# fecha 2011/08/10 


Listado 16-3. Nuevo comentario para informar sobre actualizaciones. 

Supongamos que agregamos mas codigo a las funciones actuales del archivo 
cache, js. Los usuarios tendran el archivo dentro del cache en sus ordenadores y los 
navegadores usaran esta vieja version en lugar de la nueva. Cambiando la fecha al final del 
archivo manifiesto o agregando nuevos comentarios informaremos al navegador acerca 
de la actualizacion y todos los archivos necesarios para trabajar sin conexion seran 
nuevamente descargados, incluyendo la version mejorada del archivo cache, js. Luego 
de que el cache es actualizado, el navegador ejecutara la aplicacion usando los nuevos 
archivos en el ordenador del usuario. 

Usando el archivo manifiesto 

Luego de seleccionar todos los archivos necesarios para que la aplicacion pueda funcionar 
sin conexion a Internet e incluir la lista completa de URLs apuntando a estos archivos, 
tenemos que cargar el manifiesto desde nuestros documentos. La API provee un nuevo 
atributo para el elemento <htmi> que indica la ubicacion de este archivo: 


<!DOCTYPE html> 

<html lang="es" manifest="micache.manifest"> 

<head> 

<title>Offline API</title> 

<link rel="stylesheet" href="cache.css"> 

<script src="cache.js"></script> 

</head> 

<body> 

<section id="cajadatos"> 
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Aplicacion para trabajar sin conexion 
</section> 

</body> 

</html> 


Listado 16-4. Cargando el archivo manifiesto. 

El Listado 16-4 muestra un pequeno documento HTML que incluye el atributo 
manifest en el elemento <htmi>. El atributo manifest indica la ubicacion del archivo 
manifiesto necesario para generar el cache de la aplicacion. Como puede ver, nada cambia 
en el resto del documento: los archivos para estilos CSS y codigos Javascript son incluidos 
como siempre, independientemente del contenido del archivo manifiesto. 

El manifiesto debe ser grabado con la extension .manifest y el nombre que desee 
(en nuestro ejemplo, micache). Cada vez que el navegador encuentra el atributo 
manifest en un documento, intentara descargar el archivo manifiesto en primer lugar y 
luego todos los archivos listados en su interior. El atributo manifest debe ser incluido en 
cada documento HTML que tiene que ser parte del cache de la aplicacion. El proceso es 
transparente para el usuario y puede ser controlado desde codigo Javascript usando la 
API, como veremos pronto. 

Ademas de la extension y la estructura interna del archivo manifiesto, existe otro 
requisite importante a considerar. El archivo manifiesto debe ser provisto por los 
servidores con el tipo MIME apropiado. Cada archivo posee un tipo MIME asociado para 
indicar el formate de su contenido. Por ejemplo, el tipo MIME para un archivo HTML es 
text/html. Un archivo manifiesto debe ser provisto usando el tipo text/cache- 
manifest o el navegador devolvera un error. 

IMPORTANTE: El tipo MIME text/cache-manifest no forma parte de la 
configuracion por defecto de ningun servidor en este momento. Usted debera 
agregarlo a su servidor manualmente. Como incluir este nuevo tipo de archivo 
depende de la clase de servidor con la que trabaje. Para algunas versiones de 
Apache, por ejemplo, el agregado de la siguiente linea en el archivo httpd.conf 
sera suficiente para comenzar a despachar estos archivos con el tipo MIME 
apropiado: AddType text/cache-manifest .manifest. 


16.2 API Offline 


El archivo manifiesto por si mismo deberia ser suficiente para generar un cache para sitios 
webs pequenos o codigos simples, pero aplicaciones complejas demandan mayor control. El 
archivo manifiesto declara los archivos necesarios para el cache, pero no puede informar 
sobre cuantos de estos archivos ya fueron descargados, o los errores encontrados en el 
proceso, o cuando una actualizacion esta lista para ser usada, entre otras importantes 
situaciones. Considerando estos posibles escenarios, la API provee el nuevo objeto 
ApplicationCache con metodos, propiedades y eventos para controlartodo el proceso. 
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Errores 

Probablemente el evento mas importante del objeto ApplicationCache es error. Si un 
error ocurre durante el proceso de lectura de archivos desde el servidor, por ejemplo, el 
cache necesario para que la aplicacion trabaje fuera de linea no podra ser creado o 
actualizado. Es extremadamente importante reconocer estas situaciones y actuar de 
acuerdo a las circunstancias. 

Usando el documento HTML presentado en el Listado 16-4, vamos a construir una 
pequena aplicacion para entender como funciona este evento. 


function iniciar(){ 

var cache=window.applicationCache; 

cache.addEventListener('error', errores, false); 

} 

function errores(){ 
alert('error'); 

} 

window.addEventListener('load', iniciar, false); 


Listado 16-5. Controlando errores. 

El atributo applicationCache para el objeto Window usado en el codigo del Listado 
16-5 retorna el objeto ApplicationCache para este documento. Luego de almacenar una 
referencia al objeto dentro de la variable cache, agregamos una escucha para el evento 
error. Esta escucha llamara a la funcion errores () cuando el evento es disparado y un 
mensaje de alerta sera mostrado informando el error. 

Hagalo usted mismo: Cree un archivo HTML con el codigo del Listado 16-4, un 
archivo Javascript llamado cache . j s con el codigo del Listado 16-5, y un archivo 
manifiesto llamado micache.manifest. De acuerdo a lo que hemos estudiado, 
debera incluir en el archivo manifiesto la lista de archivos necesarios para el 
cache dentro de la categoria cache. Para nuestro ejemplo, estos archivos son el 
archivo HTML, el archivo cache, js y el archivo cache.css (los estilos para este 
ultimo archivo son presentados en el Listado 16-6). Suba estos archivos a su 
servidor y abra el documento HTML en su navegador. Si elimina el archivo 
manifiesto u olvida agregar el tipo MIME correspondiente para este archivo en su 
servidor, el evento error sera disparado. Tambien puede interrumpir el acceso a 
Internet o usar la opcion Trabajar sin Conexion ofrecida en Firefox para ver la 
aplicacion funcionando sin conexion y desde el nuevo cache. 

IMPORTANTE: La implementacion de API Offline se encuentra en un nivel 
experimental en este momento. Recomendamos probar los ejemplos de este capitulo 
en Firefox o Google Chrome. Firefox ofrece la opcion de desactivar la conexion y 
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trabajar fuera de llnea (haga clic en la opcion Trabajar sin Conexion en el menu 
Desarrollador Web). Ademas, Firefox es el unico navegador que nos permitira 
eliminar el cache para facilitar su estudio (vaya a Opciones/Avanzado/Red y 
seleccione el cache de su aplicacion para eliminarlo). Por otro lado, Google Chrome ya 
ha implementado casi todos los eventos disponibles en esta API y nos permitira 
experimentar con todas las posibilidades que ofrece. 

El archivo CSS tiene solo que incluir estilos para el elemento <section> de nuestra 
plantilla. Puede crear los suyos o utilizar los siguientes: 


#cajadatos{ 
width: 5 0 Opx; 
height: 300px; 
margin: lOpx; 
padding: lOpx; 
border: lpx solid #999999; 

} 


Listado 16-6. Regia CSS para la cajadatos. 


Online y offline 

Una nueva propiedad para el objeto Navigator fue incorporada. Se llama onLine e indica 
el actual estado de la conexion. Esta propiedad tiene dos eventos asociados que seran 
disparados cuando su valor cambie. La propiedad y los eventos no son parte del objeto 
ApplicationCache, pero son utiles para esta API. 

online Este evento es disparado cuando el valor de la propiedad onLine cambia a true 
(verdadero). 

offline Este evento es disparado cuando el valor de la propiedad onLine cambia a false 
(falso). 

El siguiente es un ejemplo de como usarlos: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 

window.addEventListener( 1 online 1 , function(){ estado(l); }, 

false); 

window.addEventListener( 1 offline', function(){ estado(2); }, 

false); 

} 

function estado(valor){ 
switch(valor){ 
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case 1: 

caj adatos.innerHTML+= 1 <br>Estamos Conectados'; 
break; 

caj adatos.innerHTML+= 1 <br>Estamos Desconectados'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado 16-7. Controlando el estado de la conexion. 

En el codigo del Listado 16-7, usamos funciones anonimas para manejar eventos y 
enviar un valor a la funcion estado 0 con la intencion de mostrar el mensaje 
correspondiente en la caj adatos. Los eventos seran disparados cada vez que el valor de 
la propiedad onLine cambie. 

IMPORTANTE: No hay garantfa alguna de que la propiedad retorne siempre el 
valor adecuado. Escuchar a estos eventos en un ordenador de escritorio 
probablemente no producira ningun efecto, incluso cuando el equipo sea 
completamente desconectado de Internet. Para probar este ejemplo, 
recomendamos usar la opcion Trabajar sin Conexion ofrecida por Firefox. 

Hagalo usted mismo: Use los mismos archivos HTML y CSS de ejemplos previos. 
Copie el codigo del Listado 16-7 en el archivo cache, js. Usando Firefox, elimine el 
cache de su aplicacion y abra el documento HTML. Para probar el funcionamiento 
de los eventos, puede usar la opcion Trabajar sin Conexion. Cada vez que active o 
desactive esta opcion, la condicion cambiara y un nuevo mensaje sera 
automaticamente agregado a la caj adatos. 

Procesando el cache 

Crear o actualizar el cache puede tomar desde algunos segundos hasta varios minutos, 
dependiendo del tamano de los archivos que deben ser descargados. El proceso pasa por 
diferentes estados de acuerdo con lo que el navegador es capaz de hacer en cada 
momento. En una actualizacion normal, por ejemplo, el navegador intentara primero leer 
el archivo manifesto para buscar por posibles actualizaciones, descargara todos los 
archivos listados en el manifesto (si la actualizacion existe) e informara cuando el proceso 
es finalizado. Para ofrecer informacion sobre cada paso en el proceso, la API ofrece la 
propiedad status. Esta propiedad puede tomar los valores siguientes: 

UNCACHED (valor 0) Este valor indica que ningun cache fue creado aun para la aplicacion. 
IDLE (valor 1) Este valor indica que el cache de la aplicacion es el mas nuevo disponible y 
no es obsoleto. 
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CHECKING (valor 2) Este valor indica que el navegador esta comprobando la existencia de 
nuevas actualizaciones. 

DOWNLOADING (valor 3) Este valor indica que los archivos para el cache estan siendo 
descargados. 

UPDATEREADY (valor 4) Este valor indica que el cache de la aplicacion esta disponible y no 
es obsoleto, pero no es el mas nuevo (una actualizacion esta lista para reemplazarlo). 
OBSOLETE (valor 5) Este valor indica que el cache actual es obsoleto. 

Podemos controlar el valor de la propiedad status en cualquier momenta, pero es 
mejor usar los eventos provisto por el objeto ApplicationCache para controlar el estado 
del proceso y el cache. Los siguientes eventos son normalmente disparados en secuencia, 
y algunos de ellos estan asociados a un estado espedfico del cache de la aplicacion: 

checking Este evento es disparado cuando el navegador esta controlando por la existencia 
de actualizaciones. 

noupdate Este evento es disparado cuando no fueron encontrados cambios en el archivo 
manifiesto. 

downloading Este evento es disparado cuando el navegador encuentra una nueva 
actualizacion y comienza a descargar los archivos. 
cached Este evento es disparado cuando el cache esta listo. 

updateready Este evento es disparado cuando el proceso de descarga para una 
actualizacion fue completado. 

obsolete Este evento es disparado cuando el archivo manifiesto ya no esta disponible y el 
cache esta siendo eliminado. 

El siguiente ejemplo nos ayudara a entender este proceso. Mediante este codigo, cada 
vez que un evento es disparado, un mensaje es agregado a la cajadatos con el valor del 
evento y el de la propiedad status. 


function iniciar(){ 

cajadatos=document.getElementByld('caj adatos'); 

cache=window.applicationCache; 

cache.addEventListener('checking 1 , function(){ mostrar(l); }, 

false); 

cache.addEventListener('downloading', function(){ mostrar(2); }, 

false); 

cache.addEventListener('cached 1 , function(){ mostrar(3); }, 

false); 

cache.addEventListener('updateready', function(){ mostrar(4); }, 

false); 

cache.addEventListener( 1 obsolete 1 , function(){ mostrar(5); }, 

false); 

} 
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function mostrar(valor){ 

caj adatos.innerHTML+= 1 <br>Estado: '+cache.status; 
cajadatos.innerHTML+= 1 | Evento: '+valor; 

} 

window.addEventListener('load', iniciar, false); 


Listado 16-8. Controlando la conexion. 

Usamos funciones anonimas para responder a los eventos y enviar un valor que nos 
permita identificarlos luego en la funcion mostrar (). Este valor y el valor de la propiedad 
status son mostrados en la pantalla cada vez que el navegador realiza un nuevo paso en 
la generation del cache. 

Hagalo usted mismo: Use los archivos HTML y CSS de ejemplos previos. Copie el 
codigo del Listado 16-8 dentro del archivo cache, js. Suba la aplicacion a su 
servidor y vea como los diferentes pasos del proceso son mostrados en la 
pantalla de acuerdo al estado del cache cada vez que el documento es cargado. 

IMPORTANTE: Si el cache ya fue creado, es importante seguir diferentes pasos para 
limpiar el viejo cache y cargar la nueva version. Modificar el archivo manifesto 
agregando un comentario es uno de los pasos necesarios, pero no el unico. Los 
navegadores mantienen una copia de los archivos en el ordenador por algunas 
horas antes de siquiera considerar comprobar si existen actualizaciones, por lo que 
no importa cuantos comentarios o archivos agregue al manifesto, el navegador 
utilizara el viejo cache por un tiempo. Para probar estos ejemplos, le 
recomendamos cambiar los nombres de cada archivo. Por ejemplo, agregar un 
numero al final del nombre (como en cache2. j s) hara que el navegador considere 
esta como una nueva aplicacion y cree un nuevo cache. Esto, por supuesto, es solo 
util por propositos didacticos. 

Progreso 

Aplicaciones que incluyen imagenes, varios archivos de codigos, informacion para bases 
de datos, videos, o cualquier otro archivo de tamano considerable pueden tomar un buen 
tiempo en ser descargadas. Para seguir este proceso, la API trabaja con el ya conocido 
evento progress. Este evento es el mismo que ya hemos estudiado en capitulos 
anteriores. 

El evento progress solo es disparado mientras los archivos son descargados. En el 
siguiente ejemplo vamos a usar los eventos noupdate junto con cached y updateready 
analizados previamente para informar cuando el proceso es finalizado. 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 

cajadatos.innerHTML= 1 <progress value="0" max="100">0%</progress>'; 
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cache=window.applicationCache; 

cache.addEventListener('progress 1 , progreso, false); 

cache.addEventListener( 1 cached', mostrar, false); 
cache.addEventListener( 1 updateready', mostrar, false); 
cache.addEventListener('noupdate', mostrar, false); 

} 

function progreso(e){ 
if(e.lengthComputable){ 

var por=parseInt(e.loaded/e.total*100); 
var barraprogreso=cajadatos.querySelector("progress"); 
barraprogreso.value=por; 
barraprogreso.innerHTML=por+' %' ; 

} 

} 

function mostrar(){ 

caj adatos.innerHTML='Terminado'; 

} 

window.addEventListener('load 1 , iniciar, false); 


Listado 16-9. Progreso de la descarga. 

Como siempre, el evento progress es disparado periodicamente para informar 
acerca del estado del proceso. En el codigo del Listado 16-9, cada vez que progress es 
disparado, la funcion progreso () es llamada y la situacion es informada en pantalla 
usando un elemento <progress>. 

Existen diferentes situaciones posibles al final del proceso. La aplicacion podria haber 
sido almacenada en el cache por primera vez, en este caso el evento cached es disparado. 
Tambien podria ser que el cache ya existe y una actualizacion se encuentra disponible, 
entonces cuando los archivos son finalmente descargados el evento que es disparado es 
updateready. Y una tercera posibilidad es que un cache ya estaba en uso y no se 
encontro ninguna actualizacion, en este caso el evento noupdate es el que sera 
disparado. Escuchamos a cada uno de estos eventos y llamamos a la funcion mostrar () 
en cada caso para imprimir el mensaje "Terminado" en la pantalla, indicando de este 
modo la finalizacion del proceso. 

Puede encontrar una explicacion de la funcion progreso 0 en el Capitulo 13. 

Hagalo usted mismo: Use los archivos HTML y CSS de ejemplos previos. Copie el 
codigo del Listado 16-8 dentro del archivo cache, js. Suba la aplicacion a su 
servidor y cargue el documento principal. Debera incluir un archivo de gran 
tamano en el manifiesto para poder ver trabajando la barra de progreso (algunos 
navegadores establecen limitaciones sobre el tamano del cache. Recomendamos 
probar este ejemplo con archivos de no mas de 5 megabytes). Por ejemplo, 
usando el video trailer.ogg introducido en el Capitulo 5, el archivo manifiesto 
ser verfa como el siguiente: 


CACHE MANIFEST 
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cache.html 
cache.css 
cache.j s 
trailer.ogg 

# fecha 2011/06/27 


IMPORTANTE: En nuestro ejemplo utilizamos innerHTML para agregar un nuevo 
elemento <progress> al documento. Esta no es una practica recomendada pero 
es util y conveniente por razones didacticas. Normalmente los elementos son 
agregados al documento usando el metodo Javascript createElement () junto 
con appendChildO . 

Actualizando el cache 

Hasta el momento hemos visto como crear un cache para nuestra aplicacion, como 
informar al navegador cuando una actualizacion esta disponible y como controlar el 
proceso cada vez que un usuario accede a la aplicacion. Esto es util pero no 
completamente transparente para el usuario. El cache y las actualizaciones del mismo son 
cargados tan pronto como el usuario ejecuta la aplicacion, lo que puede producir demoras 
y mal funcionamiento. La API resuelve este problema incorporando nuevos metodos que 
nos permiten actualizar el cache mientras la aplicacion esta siendo utilizada: 

update() Este metodo inicia una actualizacion del cache. Le indica al navegador que 
descargue primero el archivo manifiesto y luego continue con el resto de los archivos si 
detecta algun cambio (los archivos para el cache fueron modificados). 
swapCacheQ Este metodo activa el cache mas reciente luego de una actualizacion. No 
ejecuta ningun codigo y tampoco reemplaza recursos, solo le indica al navegador que 
un nuevo cache se encuentra disponible para su lectura. 

Para actualizar el cache, lo unico que necesitamos hacer es llamar al metodo 
update 0 . Los eventos updateready y noupdate seran utiles para conocer el resultado 
del proceso. En el proximo ejemplo, vamos a usar un nuevo documento HTML con dos 
botones para solicitar la actualizacion y comprobar cual es el codigo que se encuentra 
actualmente en el cache. 


<!DOCTYPE html> 

chtml lang="es" manifest="micache.manifest"> 

<title>Offline API</title> 

<link rel="stylesheet" href="cache.css"> 

<script src="cache.js"></script> 

</head> 
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<body> 

<section id="cajadatos"> 

Aplicacion para trabajar sin conexion 
</section> 

<button id="actualizar">Actualizar Cache</button> 
<button id="prueba">Verificar</button> 

</body> 

</html> 


Listado 16-10. Documento HTML para probar el metodo update (). 

El codigo Javascript implementa tecnicas ya estudiadas. Solo hemos agregado dos 
nuevas funciones para responder a los botones de la plantilla: 


function iniciar(){ 

caj adatos=document.getElementByld('caj adatos'); 

var actualizar=document.getElementByld('actualizar'); 

actualizar.addEventListener('click', actualizarcache, false); 

var prueba=document.getElementByld('prueba'); 

prueba.addEventListener('click', probarcache, false); 

cache=window.applicationCache; 

cache.addEventListener('updateready', function(){ mostrar(l); }, 

false); 

cache.addEventListener( 1 noupdate', function(){ mostrar(2); }, 

false); 

} 

function actualizarcache(){ 
cache.update(); 

} 

function probarcache(){ 

cajadatos.innerHTML+='<br>cambiar este mensaje'; 

} 

function mostrar(valor){ 
switch(valor){ 
case 1: 

cajadatos.innerHTML+= 1 <br>Actualizacion Lista'; 
break; 
case 2: 

cajadatos.innerHTML+= 1 <br>Actualizacion No Disponible'; 


window.addEventListener('load', iniciar, false); 


Listado 16-11. Actualizando el cache y comprobando la version actual. 

En la funcion iniciar (), se agrego una escucha para el evento click a los dos botones 
de la plantilla. Un die en el boton actualizar llamara a la funcion actualizarcache 0 y 
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ejecutara el metodo update(). Y un clic sobre el boton prueba llamara a la funcion 
probarcache () y un texto sera mostrado en la cajadatos. Este texto nos facilitara la 
creacion de una nueva version del codigo con la que podremos comprobar si el cache es 
actualizado o no. 

Hagalo usted mismo: Cree un nuevo documento HTML con el codigo del Listado 
16-10. El manifiesto y el archivo CSS son los mismos de ejemplos previos (a menos 
que usted haya cambiado algunos nombre de archivos. En este caso debera 
actualizar la lista de archivos dentro del manifiesto). Copie el codigo del Listado 16- 
11 dentro de un archivo llamado cache, js, y suba todo a su servidor. Abra el 
documento principal en su navegadory use los botones para probar la aplicacion. 

Una vez que el documento HTML es cargado, la ventana muestra nuestra tfpica 
cajadatos y dos botones debajo. Como explicamos anteriormente, el boton "Actualizar 
Cache" tiene el evento click asociado con la funcion actualizarcacheO . Si el boton 
es presionado, el metodo update 0 es ejecutado dentro de esta funcion y el proceso de 
actualizacion comienza. El navegador descarga el archivo manifiesto y lo compara con el 
mismo archivo que ya se encuentra en el cache. Si detecta que este archivo fue 
modificado, todos los archivos listados en su interior son descargados nuevamente. 
Cuando el proceso finaliza, el evento updateready es disparado. Este evento llama a la 
funcion mostrarf) con el valor l, correspondiente al mensaje "Actualizacion Lista". Por 
otro lado, si el archivo manifiesto no cambio, ninguna actualizacion es detectada y el 
evento noupdate es disparado. Este evento tambien llama a la funcion mostrar () pero 
con el valor 2, correspondiente al mensaje "Actualizacion No Disponible". 

Puede comprobar como trabaja este codigo modificando o agregando comentarios al 
archivo manifiesto. Cada vez que presione el boton para actualizar el cache luego de una 
modificacion, el mensaje "Actualizacion Lista" aparecera en la cajadatos. Puede tambien 
hacer pruebas cambiando el texto en la funcion probarcache 0 para detectar cuando 
una actualizacion esta siendo utilizada como el cache actual. 

IMPORTANTE: Esta vez no hay necesidad de eliminar el cache desde el panel de 
control del navegador para descargar una nueva version. El metodo update 0 
fuerza al navegador a descargar el archivo manifiesto y el resto de los archivos si 
una actualizacion es detectada. Sin embargo, el nuevo cache no estara disponible 
hasta que el usuario reinicie la aplicacion. 


16.3 Referenda rapida 

API Offline es un grupo de tecnicas que involucran un archivo especial llamado manifiesto y 
varios metodos, eventos y propiedades para crear un cache y poder ejecutar aplicaciones 
desde el ordenador del usuario. La API fue pensada para proveer acceso permanente a las 
aplicaciones y la posibilidad de trabajar mientras sin acceso a Internet. 



API Offline 


Archivo manifiesto 

El archivo manifiesto es un archivo de texto con la extension .manifest conteniendo una 
lista de los archivos necesarios para construir el cache de la aplicacion. Debe ser 
comenzado con la linea cache manifest y su contenido puede estar organizado bajo las 
siguientes categorfas: 

CACHE Esta categorfa incluye los archivos que deben ser descargados para formar parte 
del cache. 

NETWORK Esta categorfa incluye los archivos que solo pueden ser accedidos cuando se 
esta conectado. 

FALLBACK Esta categorfa permite definir archivos en el cache que seran usados en lugar 
de archivos en el servidor cuando estos no esten disponibles. 

Propiedades 

El objeto Navigator incluye una nueva propiedad para informar el estado de la conexion: 

onLine Esta propiedad retorna un valor booleano que indica la condicion de la conexion. Es 
false (falso) si el navegador esta desconectado y true (verdadero) en caso contrario. 

La API provee la propiedad status para informar sobre el estado del cache de la 
aplicacion. Esta propiedad es parte del objeto ApplicationCache y puede tomar los siguientes 
valores: 

UNCACHED (valor 0) Este valor indica que ningun cache fue creado aun para la aplicacion. 
IDLE (valor 1) Este valor indica que el cache de la aplicacion es el mas nuevo y no es 
obsoleto. 

CHECKING (valor 2) Este valor indica que el navegador esta buscando nuevas actualiza- 
ciones. 

DOWNLOADING (valor 3) Este valor indica que los archivos para el cache estan siendo 
descargados. 

UPDATEREADY (valor 4) Este valor indica que el cache para la aplicacion esta disponible y 
no es obsoleto, pero no es el mas nuevo; una actualizacion esta lista para 
reemplazarlo. 

OBSOLETE (valor 5) Este valor indica que el cache actual es obsoleto. 

Eventos 

Existen dos eventos para controlar el estado de la conexion: 

online Este evento es disparado cuando el valor de la propiedad onLine cambia a true 
(verdadero). 
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offline Este evento es disparado cuando el valor de la propiedad onLine cambia a false 
(falso). 

La API ofrece varios eventos, pertenecientes al objeto ApplicationCache, que informan 
acerca de la condicion del cache: 

checking Este evento es disparado cuando el navegador esta comprobando si existen 
nuevas actualizaciones. 

noupdate Este evento es disparado cuando no se encuentran nuevas actualizaciones. 
downloading Este evento es disparado cuando el navegador ha encontrado una nueva 
actualizacion y comienza a descargar los archivos. 
cached Este evento es disparado cuando el cache esta listo para ser usado. 
updateready Este evento es disparado cuando la descarga de una nueva actualizacion ha 
finalizado. 

obsolete Este evento es disparado cuando el archivo manifiesto no se encuentra disponible y 
el cache esta siendo eliminado. 

progress Este evento es disparado periodicamente durante el proceso de descarga de los 
archivos para el cache. 

error Este evento es disparado si ocurre un error durante la creacion o la actualizacion del 
cache. 

Metodos 

Dos metodos son incluidos en la API para solicitar una actualizacion del cache: 

update() Este metodo inicia una actualizacion del cache. Indica al navegador que descargue 
el archivo manifiesto y el resto de los archivos si una actualizacion es detectada. 
swapCacheQ Este metodo activa el cache mas reciente luego de una actualizacion. No 
ejecuta los nuevos codigos y tampoco reemplaza recursos, solo indica al navegador 
que un nuevo cache esta disponible para su uso. 



Conclusiones 


Trabajando para el mundo 

Este es un libro sobre HTML5. Fue pensado como una gufa para desarrolladores, 
disenadores y programadores que quieran construir sitios web y aplicaciones utilizando las 
tecnologfas mas actuales. Pero nos encontramos en un proceso de transicion en el cual las 
viejas tecnologfas se fusionan con las nuevas, y los mercados no pueden seguirles el paso. 
Al mismo tiempo que millones y millones de copias de nuevos navegadores son 
descargadas de la web, millones y millones de personas no son ni siquiera conscientes de 
su existencia. El mercado esta aun repleto de viejos ordenadores funcionando con 
Windows 98 e Internet Explorer 6, o incluso peor. 

Crear para la web fue siempre un desaffo, y se vuelve cada vez mas complicado. A 
pesar de los prolongados y duros esfuerzos por construir e implementar estandares para 
Internet, ni siquiera los nuevos navegadores los soportan por completo. Y viejas versiones 
de navegadores que no siguen ninguna clase de estandar siguen presente, funcionando 
alrededor de todo el mundo, haciendo nuestras vidas imposible. 

Por esta razon, es momento de ver que podemos hacer para acercar HTML5 a la gente, 
como podemos crear e innovar en un mundo que parece indiferente. Llego la hora de 
estudiar que alternativas tenemos para trabajar con estas nuevas tecnologfas y hacerlas 
disponibles para todos. 

Las alternativas 

Cuando se trata de alternativas, debemos decidir que posicion tomar. Podemos ser 
agresivos, atentos, inteligentes o trabajadores. Un desarrollador agresivo dira: "Esta 
aplicacion fue programada para trabajar en nuevos navegadores. Los nuevos navegadores 
son gratuitos. No sea perezoso y descargue una copia". El desarrollador atento dira: "Esta 
aplicacion fue desarrollada aprovechando las nuevas tecnologfas disponibles. Si desea 
disfrutar mi trabajo en todo su potencial, actualice su navegador. Mientras tanto, aquf 
tiene una version antigua que puede utilizar en su lugar". El desarrollador inteligente dira: 
"Hacemos la tecnologfa de ultima generacion disponible para todos. No necesita hacer 
nada, nosotros ya lo hicimos por usted". Y finalmente, un trabajador dira: "Esta es una 
version de nuestra aplicacion adaptada a su navegador, aquf puede acceder a otra con 
mas herramientas, especial para nuevos navegadores, y aquf ofrecemos la version 
experimental de nuestra super evolucionada aplicacion". 

Para un acercamiento mas practico y util, estas son las opciones disponibles cuando el 
navegador del usuario no esta preparado para HTML5: 
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Informar Recomiende al usuario actualizar su navegador si algunas caracteristicas 
requeridas por su aplicacion no estan disponibles. 

Adaptar Seleccione diferentes estilos y codigos para el documento de acuerdo con las 
caracteristicas disponibles en el navegador del usuario. 

Redireccionar Redireccione usuarios a un documento completamente diferente disenado 
especialmente para viejos navegadores. 

Emular Use librerias que hagan HTML5 disponible en viejos navegadores. 

Modernizr 

Sin importar cual es la opcion elegida, lo primero que debemos hacer es detectar si las 
caracteristicas de HTML5 requeridas por su aplicacion estan disponibles en el navegador 
del usuario o no. Estas caracteristicas son independientes y faciles de identificar, pero las 
tecnicas requeridas para hacerlo son tan diversas como las caracteristicas mismas. 
Desarrolladores deben considerar diferentes navegadores y versiones, y depender de 
codigos que a menudo no son para nada confiables. 

Una pequena libreria llamada Modernizr fue desarrollada con la intencion de resolver 
este problema. Esta libreria crea un objeto llamado Modernizr que ofrece propiedades 
para cada caracteristica de HTML5. Estas propiedades retornan un valor booleano que 
sera true (verdadero) o false (falso) dependiendo si la caracteristica esta disponible o 
no. 

La libreria es de codigo abierto, programada en Javascript y disponible gratuitamente 
en www.modernizr.com. Solo tiene que descargar el archivo Javascript e incluirlo en sus 
documentos, como en el siguiente ejemplo: 


<!DOCTYPE html> 
chtml lang="es"> 

<head> 

<title>Modernizr</title> 

<script src="modernizr.min.js"></script> 
<script src="modernizr.js"></script> 
</head> 

<body> 

<section id="cajadatos"> 
contenido 
</section> 

</body> 

</html> 


Listado C-l. Incluyendo Modernizr en sus documentos. 

El archivo llamado modernizr. min. js es una copia del archivo de la libraria Modernizr 
descargado desde su sitio web. El segundo archivo incluido en el documento HTML en el 
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Listado C-l es nuestro propio codigo Javascript donde controlamos los valores de las 
propiedades provistas por la libreria: 


function iniciar(){ 

var caj adatos=document.getElementByld('caj adatos'); 
if(Modernizr.boxshadow){ 

cajadatos.innerHTML='Box Shadow esta disponible 1 ; 
}else{ 

cajadatos.innerHTML='Box Shadow no esta disponible'; 

} 

} 

window.addEventListener('load', iniciar, false); 


Listado C-2. Detectando la disponibilidad de estilos CSS para generar sombras. 

Como puede ver en el codigo del Listado C-2, podemos detectar cualquier 
caracterlstica de HTML5 usando solo un condicional if y la propiedad del objeto 
Modernizr correspondiente. Cada caracterlstica tiene su propia propiedad disponible. 

IMPORTANTE: Esta es solo una introduction breve a esta util libreria. Usando 
Modernizr, por ejemplo, podemos tambien seleccionar un grupo de estilos CSS 
desde archivos CSS sin usar Javascript. Modernizr ofrece clases especiales para 
implementar en nuestro archivo de estilos y as! seleccionar las propiedades CSS 
apropiadas de acuerdo a cuales estan disponibles en el navegador que abrio la 
aplicacion. Para aprender mas sobre esta libreria, visite www.modernizr.com. 

Librerias 

Una vez que las caracterlsticas disponibles son detectadas, tenemos la opcion de usar solo 
aquello que funciona en el navegador del usuario o recomendarle actualizar el software a 
una version que incluya todas las caracterlsticas que nuestra aplicacion necesita. Sin 
embargo, imagine que usted es un desarrollador obstinado o un loco programador que (al 
igual que sus usuarios y clientes) no se interesa por fabricantes de navegadores o 
versiones de programas o versiones beta o caracterlsticas no implementadas o lo que sea, 
usted solo quiere ofrecer la ultima tecnologla disponible sin importar nada. 

Bueno, aqul es donde librerias independientes pueden ayudar. Docenas de 
programadores en el mundo, probablemente mas obstinados que nosotros, se encuentran 
desarrollando y mejorando librerias que imitan caracterlsticas de HTML5 en navegadores 
viejos, especialmente APIs de Javascript. Gracias a este esfuerzo, ya disponemos de los 
nuevos elementos HTML, selectores y estilos CSS3, y hasta complejas APIs como Canvas o 
Web Storage en cada navegador del mercado. 

Por mayor informacion dirljase al siguiente enlace donde encontrara una lista actua- 
lizada de todas las librerias disponibles: www.github.com/Modernizr/Modernizr/wiki/ 
HTML5-Cross-browser-Polyfills 
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Google Chrome Frame 

Google Chrome Frame sera probablemente nuestro ultimo recurso. Personalmente pienso 
que era una buena idea al comienzo, pero hoy dia es mejor recomendar a nuestros 
usuarios actualizar sus navegadores antes que descargar un agregado como Google 
Chrome Frame. 

Google Chrome Frame fue espedficamente desarrollado para las viejas versiones de 
Internet Explorer. Fue disenado para introducir todo el poder y las posibilidades del 
navegador Google Chrome dentro de navegadores que no estan preparados para las 
nuevas tecnologias pero aun se encuentran instalados en los ordenadores de los usuarios 
y forman parte del mercado. 

Como dije anteriormente, fue una buena idea. Insertando una simple etiqueta HTML 
en nuestros documentos, un mensaje era mostrado a los usuarios recomendando instalar 
Google Chrome Frame antes de ejecutar la aplicacion. Luego de finalizado este simple 
paso, todas las caracteristicas soportadas por Google Chrome estaban automaticamente 
disponibles en ese viejo navegador. Sin embargo, los usuarios no evitaban descargar 
software de la web. No discernir cual es la diferencia entre esto y descargar una nueva 
version de un navegador, especialmente ahora que hasta Internet Explorer tiene su propia 
version gratuita compatible con HTML5. Estos dias, con tantos navegadores listos para 
ejecutar aplicaciones HTML5, es mejor guiar a los usuarios hacia este nuevo software en 
lugar de enviarlos hacia oscuros y confusos agregados como Google Chrome Frame. 

Para conocer mas sobre Google Chrome Frame y como usarlo visite: 

code.google.com/chrome/chromeframe/ 


Trabajando para la nube 

En este nuevo mundo de dispositivos moviles y computacion en la nube, no importa que 
tan nuevo sea el navegador, siempre habra algo mas de que preocuparnos. 
Probablemente el iPhone puede ser considerado el responsable de comenzarlo todo. 
Desde su aparicion, varias cosas cambiaron en la web. El iPad lo siguio, y toda clase de 
imitaciones emergieron luego para satisfacer este nuevo mercado. Gracias a este cambio 
radical, el acceso movil a Internet se volvio una practica comun. De repente estos nuevos 
dispositivos se volvieron un importante objetivo para sitios y aplicaciones web, y la 
diversidad de plataformas, pantallas e interfaces forzaron a los desarrolladores a adaptar 
sus productos a cada caso especifico. 

Estos dias, independientemente de la clase de tecnologfa que usemos, nuestros sitios y 
aplicaciones web deben ser adaptados a cada posible plataforma. Esta es la unica manera 
de mantener consistencia y hacer nuestro trabajo disponible para todos. 
Afortunadamente, HTML considera estas situaciones y ofrece el atributo media en el 
elemento <iink> para seleccionar recursos externos de acuerdo a parametros 
predeterminados: 
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<!DOCTYPE html> 
chtml lang="es"> 

<title>Documento Principal</title> 

<link rel="stylesheet" href="ordenador.css" media="all and (min- 

width: 769px)"> 

<link rel="stylesheet" href="tablet.css" media="all and (min- 

width: 321px) and (max-width: 768px)"> 
<link rel="stylesheet" href="celular.css" media="all and (min- 

width: Opx) and (max-width: 320px)"> 

</head> 

<body> 

</body> 

</html> 


Listado C-3: Diferentes archivos CSS para diferentes dispositivos. 

Seleccionar cuales estilos CSS seran aplicados al documento es una manera facil de 
hacer este trabajo. De acuerdo al dispositivo o al tamano de la pantalla, los archivos CSS 
son cargados y los estilos apropiados son aplicados. Elementos HTML pueden ser 
cambiados de tamano y documentos enteros pueden ser adaptados y mostrados dentro 
de espacios y circunstancias especificas. 

En el Listado C-3, tres archivos CSS diferentes son incorporados para tres situaciones 
distintas. Las situaciones son detectadas por los valores del atributo media en cada 
etiqueta <iink>. Usando las propiedades min-width y max-width, podemos 
determinar el archivo CSS que sera aplicado a este documento de acuerdo con la 
resolucion de la pantalla en la cual el documento esta siendo mostrado. Si el tamano 
horizontal de la pantalla es de un valor entre 0 y 320 pixeles, el archivo celular.css es 
cargado. Para una resolucion entre 321 y 768 pixeles, el archivo tablet.css es el 
incluido. Y finalmente, para una resolucion mayor a 768 pixeles, el archivo 
ordenador. css es el que sera usado. 

En este ejemplo, contemplamos tres posibles escenarios: el documento es cargado en 
un celular pequeno, una Tablet PC o un ordenador de escritorio. Los valores usados son 
los que normalmente se encuentran en estos dispositivos. 

Por supuesto, el proceso de adaptacion no incluye solo estilos CSS. Las interfaces 
provistas por estos dispositivos son ligeramente diferentes entre si debido principalmente 
a la eliminacion de partes fisicas, como el teclado y el raton. Eventos comunes como 
click o mouseover han sido modificados o en algunos casos reemplazados por eventos 
tactiles. Y ademas, existe otra importante caracteristica presente en dispositivos moviles 
que le permite al usuario cambiar la orientacion de la pantalla y de este modo cambiar 
tambien el espacio disponible para el documento. Todos estos cambios entre un 
dispositivo y otro hacen imposible lograr una buena adaptacion con solo agregar o 
modificar algunas reglas CSS. Javascript debe ser usado para adaptar los codigos o incluso 
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detectar la situacion y redireccionar a los usuarios hacia una version del documento 
especifica para el dispositivo con el que estan accediendo a la aplicacion. 

IMPORTANTE: Este tema se encuentra fuera de los propositos de este libro. Para 
mayor informacion, visite nuestro sitio web. 


Recomendaciones finales 

Siempre habra desarrolladores que le diran: "Si usa tecnologias que no se encuentran 
disponibles para el 5% de los navegadores en el mercado, perdera un 5% de usuarios". Mi 
respuesta es: "Si usted tiene clientes que satisfacer, entonces adapte, redireccione o 
emule, pero si usted trabaja para usted mismo, informe". 

Siempre debe buscar el camino al exito. Si trabaja para otros, debe ofrecer soluciones 
completamente funcionales, productos que los clientes de sus clientes puedan acceder, 
sin importar la eleccion que hayan hecho con respecto a ordenadores, navegadores o 
sistemas operativos. Pero si usted trabaja para usted mismo, para ser exitoso debe crear 
lo mejor de lo mejor, debe innovar, estar por delante de los demas, independientemente 
de lo que el 5% de los usuarios tenga instalado en sus ordenadores. Debe trabajar para el 
20% que ya descargo la ultima version de Firefox, el 15% que ya tiene Google Chrome 
instalado en su ordenador, el 10% que tiene Safari en su dispositivo movil. Usted tiene 
millones de usuarios listos para convertirse en sus clientes. Mientras que el desarrollador 
le pregunta por que se arriesgaria a perder un 5% de usuarios, yo le pregunto: dpor que 
dar la espalda a las oportunidades que se le presentan? 

Usted nunca conquistara el 100% del mercado, y eso es un hecho. Usted no desarrolla 
sus sitios web en chino o portugues. Usted no esta trabajando para el 100% del mercado, 
usted ya trabaja solo para una pequena porcion del mismo. <LPor que seguir limitandose? 
Desarrolle para el mercado que lo acerque al exito. Desarrolle para la porcion del mercado 
que crece continuamente y que le permitira aplicar las nuevas tecnologias disponibles y 
dejar correr su imaginacion. Del mismo modo que no se preocupa por mercados que 
hablan otros idiomas, tampoco debe preocuparse por la parte del mercado que aun utiliza 
viejas tecnologias. Informe. Muestreles lo que se estan perdiendo. Aproveche las ultimas 
tecnologias disponibles, desarrolle para el futuro y tendra el exito asegurado. 
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